/* ================================================================
   xfazi — Master Theme Override v4.0 — DEFINITIVE
   
   Orange = rgb(255,152,0) / #ff9800 in template style.css
   All instances NUKED and replaced with Electric Blue #2969fa
   
   Z-INDEX ARCHITECTURE:
     html/body (white bg)                  → z: 0
     sections transparent                  → z: auto
     #xfazi-watermark-layer (fixed)        → z: 5
     .mil-content, .container, sections    → z: 20 (relative)
     .mil-frame, .mil-ball, menus          → z: 999+
   ================================================================ */

/* ----------------------------------------------------------------
   1. KILL ALL DODECAHEDRA, GEOMETRY, AND SCROLL INDICATORS
--------------------------------------------------------------- */
.mil-dodecahedron,
.mil-pentagon,
.mil-dodecahedron *,
[class*="dodecahedron"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Spinning "Przewiń w dół" circle and mouse icon */
.mil-circle-text,
.mil-circle-text *,
[class*="mil-mouse"],
[class*="mil-scroll"],
.mil-scroll-down,
.mil-arrow-down-place,
.mil-down-btn {
    display: none !important;
}

/* The lines SVG OVERLAY — hide the visible one, keep hidden-elements version */
.mil-lines-place {
    display: none !important;
}


/* ----------------------------------------------------------------
   2. BACKGROUND WATERMARK — TEMPORARILY HIDDEN
   User has opted to evaluate clean white layout.
--------------------------------------------------------------- */
#xfazi-watermark-layer {
    display: none !important;
}
/* (reserve block — re-enable by removing display:none above) */
@keyframes xfPulseFloat {
    0%,  100% { transform: translateY(0px)   scale(1)    rotate(-4deg); }
    50%        { transform: translateY(-20px) scale(1.02) rotate(3deg);  }
}
@keyframes xfPulseFloatB {
    0%,  100% { transform: translateY(0px)  scale(1)    rotate(6deg);  }
    50%        { transform: translateY(22px) scale(1.02) rotate(-3deg); }
}
@keyframes xfPulseFloatC {
    0%,  100% { transform: translateY(0px)   scale(1)    rotate(-2deg); }
    50%        { transform: translateY(-28px) scale(1.03) rotate(4deg);  }
}

/* Watermark layer is hidden — see rule above */

/* ----------------------------------------------------------------
   3. CONTENT Z-INDEX — above the watermark layer (z:5)
   Must be position:relative with z-index >= 20
--------------------------------------------------------------- */
.mil-content,
#swupMain,
#swupMain > section,
#swupMain > div,
#swupMain > footer,
.container,
.mil-inner-banner > *,
.mil-banner > * {
    position: relative !important;
    z-index: 20 !important;
}

/* ----------------------------------------------------------------
   PHASE 2 — LAYOUT SHIFT FIX
   Push content down below the top portion of the frame
--------------------------------------------------------------- */
.mil-content {
    padding-top: 100px !important;
}

/* Frame bars, cursor ball, preloader — highest layer */
.mil-frame,
.mil-menu-frame,
.mil-ball,
.mil-curtain,
.mil-progress-track,
.mil-preloader {
    z-index: 999 !important;
}

/* ----------------------------------------------------------------
   4. GLOBAL WHITE MANDATE — sections TRANSPARENT so watermarks show
--------------------------------------------------------------- */
html, body {
    background-color: #ffffff !important;
}

/* Transparent sections — white comes from body */
section,
.mil-banner,
.mil-inner-banner {
    background-color: transparent !important;
    background: none !important;
}

/* Light tint sections that need slight separation */
section[style*="f8fafc"],
section.mil-light-bg {
    background-color: rgba(248, 250, 252, 0.78) !important;
}

.mil-wrapper,
.mil-content {
    background-color: transparent !important;
    background: none !important;
}

.mil-curtain {
    background-color: #ffffff !important;
}

/* ----------------------------------------------------------------
   5. FOOTER — PURE WHITE ALWAYS
--------------------------------------------------------------- */
footer,
.mil-footer,
footer.mil-dark-bg {
    background-color: #ffffff !important;
    background: #ffffff !important;
}
footer *:not(a) {
    color: #4b5563 !important;
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6 {
    color: #0f172a !important;
}
footer a {
    text-decoration: none !important;
    color: #4b5563 !important;
}
footer .mil-divider {
    background-color: #e2e8f0 !important;
}

/* ----------------------------------------------------------------
   6. MOBILE NAV — PURE WHITE OVERLAY
   Fix: template was built for dark overlay, all link text was
   white. Now overlay is white, must force all nav text to dark.
--------------------------------------------------------------- */
.mil-menu-frame {
    background-color: #ffffff !important;
}
.mil-menu-frame h1,.mil-menu-frame h2,.mil-menu-frame h3,
.mil-menu-frame h4,.mil-menu-frame h5,.mil-menu-frame h6,
.mil-menu-frame .mil-muted {
    color: #0f172a !important;
}
.mil-menu-frame .mil-light-soft,
.mil-menu-frame p {
    color: #4b5563 !important;
}
.mil-menu-frame .mil-divider {
    background-color: #e2e8f0 !important;
}

/* ── MAIN NAV LINKS: Force dark on white overlay & Align Higher ─────────────── */
/* These were white-on-dark in original template */
.mil-main-menu {
    margin-top: -15vh !important; /* Pull the entire main link block higher up */
}
.mil-menu-frame .mil-main-menu ul li a,
.mil-menu-frame nav ul li a,
.mil-main-menu ul li a {
    color: #0f172a !important;
    opacity: 1 !important;
}
.mil-menu-frame .mil-main-menu ul li a:hover,
.mil-menu-frame nav ul li a:hover,
.mil-main-menu ul li a:hover {
    color: #2969fa !important;
    opacity: 1 !important;
}
/* Active link stays blue */
.mil-menu-frame .mil-main-menu ul li.mil-active > a,
.mil-main-menu ul li.mil-active > a {
    color: #2969fa !important;
    opacity: 1 !important;
}
/* Sub-menu links */
.mil-menu-frame .mil-main-menu ul ul li a,
.mil-main-menu ul ul li a {
    color: #4b5563 !important;
    opacity: 1 !important;
}

.mil-menu-frame .mil-menu-list a.mil-light-soft {
    color: #64748b !important;
}
.mil-menu-frame .mil-menu-list a.mil-light-soft:hover {
    color: #2969fa !important;
}

/* ── MENU OVERLAY ALIGNMENT FIX (Right Column) ─────────────── */
/* Lift the right-column to sit flush with the left column */
.mil-menu-frame .mil-menu-right-frame {
    align-items: center !important;
}
.mil-menu-frame .mil-menu-right-frame .mil-menu-right {
    padding-bottom: 0 !important;
    margin-top: -15vh !important;
}

/* ----------------------------------------------------------------
   7. ORANGE COMPLETE ERADICATION — rgb(255,152,0) → #2969fa
      Source: style.css exact selectors, overridden with !important
--------------------------------------------------------------- */

/* .mil-accent text color */
.mil-accent,
.mil-accent * {
    color: #2969fa !important;
}

/* .mil-marker background */
.mil-marker {
    background-color: #2969fa !important;
    color: #ffffff !important;
}

/* ── NAVIGATION active dot ──────────────────────────────────── */
/* style.css L1572-1581: .mil-main-menu ul li a.mil-active:before
   and .mil-main-menu ul li.mil-active > a */
.mil-main-menu ul li a.mil-active:before {
    background-color: #2969fa !important;
}
.mil-main-menu ul li.mil-active > a,
.mil-main-menu ul li.mil-active > a:hover {
    color: #2969fa !important;
    filter: none !important;
}

/* Navigation hover color */
.mil-main-menu ul li a:hover,
.mil-main-menu ul li.mil-has-children > a:hover {
    color: #2969fa !important;
}

/* ── BREADCRUMBS ─────────────────────────────────────────────── */
/* style.css L779: .mil-breadcrumbs li a:hover → orange */
.mil-breadcrumbs li a:hover {
    color: #2969fa !important;
}
.mil-breadcrumbs.mil-light li a:hover {
    color: #2969fa !important;
}
/* First breadcrumb link (active page indicator) */
.mil-breadcrumbs li a {
    color: #0f172a !important;
}
.mil-breadcrumbs li:after {
    color: #94a3b8 !important;
}

/* ── BREADCRUMBS ROGUE HORIZONTAL LINE ───────────────────────── */
/* style.css L751: .mil-breadcrumbs:before creates 100vw line! */
.mil-breadcrumbs::before,
.mil-breadcrumbs:before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* ── SERVICE CARDS — animated orange top border ─────────────── */
/* style.css L2368-2378: .mil-service-card-sm:before is the orange bar */
.mil-service-card-sm:before,
.mil-service-card-sm::before {
    background-color: #2969fa !important;
}
/* Also override the static border style my previous code added */
.mil-service-card-sm {
    border-top-color: transparent !important;
}

/* ── ABOUT SECTION — orange circle pause/play button ────────── */
/* style.css L2211-2228: .mil-about-quote .mil-avatar:after is the orange disk */
.mil-about-quote .mil-avatar:after,
.mil-about-quote .mil-avatar::after {
    background-color: #2969fa !important;
    color: #ffffff !important;
}

/* Any other button or icon with orange bg */
[class*="mil-sound"],
[class*="mil-play"],
[class*="mil-pause"],
.mil-sound-btn,
.mil-about-photo + * button {
    background-color: #2969fa !important;
    border-color: #2969fa !important;
    color: #ffffff !important;
}

/* ── Sweep — remove ALL orange from every possible selector ───── */
/* Removed risky exact string match wildcard because it was turning 
   invisible structure spans into massive blue borders. */

/* Also make .mil-link accent arrows blue */
.mil-link.mil-accent svg {
    background-color: rgba(41,105,250,0.12) !important;
}
.mil-link.mil-accent svg path {
    fill: #2969fa !important;
}

/* ── Scroll indicate "Przewiń w dół" circle ─────────────────── */
.mil-circle-text {
    display: none !important;
}

/* ================================================================
   8. FRAME TOP/BOTTOM BARS — HEADER (DEFINITIVE v2)
   Architecture: .mil-frame = fixed full-screen overlay, pointer-none
     .mil-frame-top = flex row logo + hamburger
   PHASE 1 MANDATE: flush to top, taller, glass effect, centered items
================================================================ */

/* The containing .mil-frame overlay is full-screen and pointer-none */
.mil-frame {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    /* Ensure it starts at the absolute top-left of the viewport */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 999 !important;
}

/* The visible top bar — glassmorphism, flush to top, taller */
.mil-frame-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    /* Taller header with room to breathe */
    height: 80px !important;
    padding: 0 40px !important;
    /* Glass effect */
    background-color: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04) !important;
    /* Flex — logo left, hamburger right, PERFECTLY vertically centered */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    .mil-frame-top {
        height: 64px !important;
        padding: 0 20px !important;
    }
}

/* Frame-bottom (page indicator + back-to-top) — hidden */
.mil-frame-bottom,
.mil-current-page,
.mil-back-to-top {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Frame right/left sides — transparent */
.mil-frame-right,
.mil-frame-left {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Menu overlay frame-top: transparent (the white overlay handles its own bg) */
.mil-menu-frame .mil-frame-top {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: static !important;
    height: auto !important;
    padding: 30px 40px !important;
}

/* ── LOGO — definitive sizing ─────────────────────────────────── */
.mil-logo,
a.mil-logo {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0 !important;     /* hides any text fallback */
    padding-left: 4px !important;
    flex-shrink: 0 !important;
}
.mil-logo img,
a.mil-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    display: block !important;
    filter: none !important;
}
@media (max-width: 768px) {
    .mil-logo img,
    a.mil-logo img {
        height: 28px !important;
        max-width: 150px !important;
    }
}

/* ── HEADER TEXT / LINKS — always dark-on-white ───────────────── */
.mil-frame-top *,
.mil-frame-top a,
.mil-frame-top span {
    color: #0f172a !important;
    opacity: 1 !important;
}

/* ── MENU BUTTON BARS — dark ──────────────────────────────────── */
.mil-menu-btn span,
.mil-menu-btn span::before,
.mil-menu-btn span::after {
    background-color: #0f172a !important;
}

/* ----------------------------------------------------------------
   9. PRELOADER
--------------------------------------------------------------- */
.mil-preloader {
    background-color: #ffffff !important;
    z-index: 99999 !important;
}
.mil-preloader .mil-h3,
.mil-preloader .mil-muted {
    color: #0f172a !important;
}
.mil-preloader .mil-thin {
    color: #4b5563 !important;
}
.mil-reveal-box {
    background-color: #2969fa !important;
}

/* ----------------------------------------------------------------
   10. TYPOGRAPHY — dark on white
--------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.mil-h1,.mil-h2,.mil-h3,.mil-h4,.mil-h5,.mil-h6 {
    color: #0f172a !important;
}
body, p { color: #4b5563 !important; }
.mil-muted { color: #0f172a !important; }
.mil-light-soft { color: #64748b !important; }
.mil-dark { color: #0f172a !important; }
.mil-dark-soft { color: #4b5563 !important; }

/* ----------------------------------------------------------------
   11. BUTTONS AND ACCENT COLORS = ELECTRIC BLUE
--------------------------------------------------------------- */
.mil-button {
    background-color: #2969fa !important;
    border-color: #2969fa !important;
    color: #ffffff !important;
}
.mil-button svg {
    background-color: #ffffff !important;
}
.mil-button svg path {
    fill: #2969fa !important;
}
.mil-button.mil-icon-button-sm svg {
    background-color: #2969fa !important;
}
.mil-button.mil-icon-button-sm svg path {
    fill: #ffffff !important;
}
.mil-progress { background-color: #2969fa !important; }
.mil-progress-track {
    background-color: rgba(41,105,250,0.08) !important;
    z-index: 999 !important;
}
.mil-link svg {
    background-color: rgba(41,105,250,0.12) !important;
}
.mil-link svg path { fill: #2969fa !important; }
.mil-service-card-sm:hover {
    box-shadow: 0 4px 30px rgba(41,105,250,0.12) !important;
}
.mil-suptitle:before {
    background-color: rgba(0,0,0,0.1) !important;
}

/* ----------------------------------------------------------------
   12. LOGO — definitive style (superseded by Section 8 above,
   this is a no-op duplicate kept for cascade safety)
   Remove this if Section 8 is sufficient.
--------------------------------------------------------------- */
/* Section 8 already handles logo sizing. Nothing extra here. */

/* ----------------------------------------------------------------
   13. ROGUE LINES & HORIZONTAL ARTIFACTS
--------------------------------------------------------------- */
/* Breadcrumb before-line (confirmed in style.css L751) — KILLED */
.mil-breadcrumbs::before,
.mil-breadcrumbs:before {
    display: none !important;
    content: none !important;
}

/* SVG lines decorators */
.mil-lines,
.mil-lines-place {
    display: none !important;
}

/* Any about-photo or about-quote pseudo-lines */
.mil-about-quote::before,
.mil-about-quote::after,
.mil-about-photo::before,
.mil-about-photo::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* Generic hr inside main content */
.mil-content hr,
#swupMain hr {
    display: none !important;
}

/* ----------------------------------------------------------------
   14. GPU ACCELERATION
--------------------------------------------------------------- */
.mil-up, .mil-animation, [class*="mil-scale"], [class*="mil-parallax"] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ----------------------------------------------------------------
   15. PORTFOLIO IMAGE SHOWCASE (portfolio-web.html)
--------------------------------------------------------------- */
.xfazi-img-showcase {
    position: relative;
    z-index: 20 !important;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    will-change: transform, box-shadow;
}
.xfazi-img-showcase:hover {
    box-shadow: 0 12px 48px rgba(41,105,250,0.18);
    transform: translateY(-4px);
}
.xfazi-img-showcase .xf-mockup-inner {
    padding-bottom: 62.5%;
    position: relative;
}
.xfazi-img-showcase .xf-browser-bar {
    position: absolute;
    top:0; left:0; right:0;
    height: 36px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 6px;
}
.xfazi-img-showcase .xf-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.xfazi-img-showcase .xf-dot:nth-child(1) { background:#fca5a5; }
.xfazi-img-showcase .xf-dot:nth-child(2) { background:#fcd34d; }
.xfazi-img-showcase .xf-dot:nth-child(3) { background:#6ee7b7; }
.xfazi-img-showcase .xf-url-bar {
    flex:1; margin-left:12px; height:20px;
    background:#f1f5f9; border-radius:4px; border:1px solid #e2e8f0;
}
.xfazi-img-showcase .xf-screen-area {
    position:absolute; top:36px; left:0; right:0; bottom:0;
    background: linear-gradient(160deg,#f8fafc 0%,#eef2ff 50%,#f8fafc 100%);
    display:flex; align-items:center; justify-content:center;
}
.xfazi-img-showcase .xf-screen-label {
    font-size:11px; font-weight:600; letter-spacing:3px;
    text-transform:uppercase; color:#cbd5e1;
}

/* ----------------------------------------------------------------
   16. CONTACT — Form and Quick Contact Cards
--------------------------------------------------------------- */
.xfazi-contact-form input,
.xfazi-contact-form textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    outline: none !important;
    width: 100%;
    padding: 14px 0 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    transition: border-color 0.3s ease;
    display: block;
}
.xfazi-contact-form input:focus,
.xfazi-contact-form textarea:focus {
    border-bottom-color: #2969fa !important;
    box-shadow: none !important;
}
.xfazi-contact-form input::placeholder,
.xfazi-contact-form textarea::placeholder {
    color: #94a3b8 !important;
}
.xfazi-contact-form textarea { min-height:140px; resize:vertical; }

/* Quick contact cards */
.xf-quick-contact-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    text-decoration: none !important;
    width: 100% !important;
    cursor: pointer !important;
    position: relative !important;           /* for tooltip */
    z-index: 30 !important;
}
.xf-quick-contact-card:hover {
    border-color: #2969fa !important;
    box-shadow: 0 6px 28px rgba(41,105,250,0.14) !important;
    transform: translateY(-2px) !important;
}
.xf-quick-contact-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(41,105,250,0.10);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #2969fa; font-size: 18px;
}
.xf-quick-contact-info { display:flex; flex-direction:column; gap:3px; }
.xf-quick-contact-label {
    font-size:10px; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; color:#94a3b8 !important; margin:0;
}
.xf-quick-contact-value {
    font-size:15px; font-weight:600; color:#2969fa !important; margin:0;
}

/* Hover tooltip (group-hover pattern without Tailwind) */
.xf-tooltip {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
}
.xf-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}
.xf-quick-contact-card:hover .xf-tooltip {
    opacity: 1;
}

/* ----------------------------------------------------------------
   17. 404 PAGE
--------------------------------------------------------------- */
.mil-404-banner { background-color: transparent !important; }
.xfazi-404-logo {
    display: block; width: min(480px, 70vw);
    margin: 0 auto 28px;
    opacity: 0.18;
    pointer-events: none;
    animation: xfPulseFloat 16s ease-in-out infinite;
    position: relative; z-index: 20;
}

/* ================================================================
   18. FOCUS RING KILLER — prevents Chrome's blue focus outline
   from appearing on html/body/fixed overlays as a blue "glow"
================================================================ */
*:focus,
*:focus-visible,
html:focus,
body:focus,
.mil-wrapper:focus,
.mil-frame:focus,
.mil-ball:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ================================================================
   19. NAV MENU LINK COLOR — stronger override for white-on-dark
   original template (style.css L1733: color rgba(255,255,255,0.8))
================================================================ */
/* Big nav links (Strona Główna, Portfolio, etc.) */
.mil-menu-frame .mil-main-menu ul li a,
.mil-menu-frame .mil-main-menu ul li a:link,
.mil-menu-frame .mil-main-menu ul li a:visited,
nav.mil-main-menu ul li a,
nav.mil-main-menu ul li a:link,
nav.mil-main-menu ul li a:visited {
    color: #0f172a !important;
    opacity: 1 !important;
}
.mil-menu-frame .mil-main-menu ul li a:hover,
nav.mil-main-menu ul li a:hover {
    color: #2969fa !important;
}
.mil-menu-frame .mil-main-menu ul li.mil-active > a,
nav.mil-main-menu ul li.mil-active > a {
    color: #2969fa !important;
}

/* Sub-level links (Strony Internetowe, Grafika) */
.mil-menu-frame .mil-main-menu ul li.mil-has-children ul li a,
nav.mil-main-menu ul li.mil-has-children ul li a {
    color: #4b5563 !important;
    opacity: 1 !important;
}

/* Right-panel quick links (.mil-light-soft) */
.mil-menu-frame .mil-menu-list li a,
.mil-menu-frame .mil-menu-list li a.mil-light-soft {
    color: #4b5563 !important;
    opacity: 1 !important;
}
.mil-menu-frame .mil-menu-list li a:hover,
.mil-menu-frame .mil-menu-list li a.mil-light-soft:hover {
    color: #2969fa !important;
}

/* All headings inside menu frame */
.mil-menu-frame h6,
.mil-menu-frame .mil-muted {
    color: #94a3b8 !important;
}

/* Divider inside menu frame */
.mil-menu-frame .mil-divider {
    background-color: #e2e8f0 !important;
}

/* ================================================================
   20. BACKGROUND ENGINE ANIMATIONS
================================================================ */
@keyframes xf-bg-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}
.xf-bg-float-anim {
    animation: xf-bg-float 10s ease-in-out infinite;
    will-change: transform;
}

/* ================================================================
   20. WATERMARK VISIBILITY BOOST
   Slightly increase opacity of background logos so they are
   definitely visible in screenshots and on screen.
================================================================ */
.xf-wm-1 { opacity: 0.14 !important; }
.xf-wm-2 { opacity: 0.08 !important; }
.xf-wm-3 { opacity: 0.12 !important; }
.xf-wm-4 { opacity: 0.09 !important; }
.xf-wm-5 { opacity: 0.07 !important; }
.xf-wm-6 { opacity: 0.13 !important; }

/* ================================================================
   21. SKILLS CARDS — descriptive text always visible
   Root cause (style.css L2662): opacity:0 + translateY(10px) + line-clamp
   Fix: force all properties to visible state at all times.
   Hover should ONLY make the ::before bar appear (line 2709).
================================================================ */
.mil-service-card-sm p {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
    visibility: visible !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
/* Override hover state — text stays unchanged, only the bar moves */
.mil-service-card-sm:hover p {
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
}


/* ================================================================
   22. HERO SECTION — true vertical centering
   Use padding-top to position the content at the visual center of
   the viewport. The heading visually belongs in the upper-center
   (not mathematical center) of the screen.
================================================================ */
section.mil-banner {
    min-height: calc(100vh - 100px) !important;
    height: auto !important;
    display: block !important;
    padding-top: 12vh !important;
    padding-bottom: 80px !important;
    margin-top: 0 !important;
    overflow: visible !important;
}

/* Reset any negative margin offset from previous attempt */
.mil-banner .mil-banner-content {
    margin-top: 0 !important;
}



/* ================================================================
   23. UTILITY CLASS — missing from template
================================================================ */
.mil-mt-15 { margin-top: 15px !important; }