/* ============================================================================
   business.css — Ulin Mahoni For Business info page
   ----------------------------------------------------------------------------
   Ported from the delivered mockup `ulinmahoni_bisnis/final_business.html`.
   That file needed no content recovery — it differs from its parent draft
   (tes14.html) by two colour lines only.

   Used by: pages/info/indonesia/business.blade.php
            pages/info/english/business.blade.php

   SCOPING CONTRACT — see the header of kerjasama.css. In short:
   `.um-business` is the scope root (on <main> and on the modal root), every
   mockup class is prefixed `bz-`, and every custom property is `--bz-*` hung
   off the scope class rather than :root.

   TOKEN NOTE — the mockup's --p-forest did double duty as a SURFACE (the
   hexagon fill, the icon-wrapper hover) and as INK (every h2/h3 colour).
   Those are split here into --bz-forest and --bz-heading; without that split
   dark mode cannot flip the headings without also wrecking the hexagon.
   ========================================================================== */

.um-business {
    /* Surfaces */
    --bz-dark:        #05140f;
    --bz-forest:      #0d2e21;   /* surface role only */
    --bz-neutral-bg:  #fcfdfc;
    --bz-soft-bg:     #f8faf9;
    --bz-card-bg:     #ffffff;

    /* Ink */
    --bz-heading:     #0d2e21;   /* split out of --p-forest */
    --bz-text-main:   #121212;
    --bz-text-muted:  #6b7c74;
    --bz-text-muted-alt: #5a6b63;

    /* Accents */
    --bz-gold:        #b08d48;
    --bz-gold-light:  #c9a664;
    --bz-green:       #2f6f55;

    --bz-card-shadow: 0 10px 30px rgba(13, 46, 33, .05);
    --bz-card-hover:  0 20px 50px rgba(13, 46, 33, .12);
    --bz-transition:  all .6s cubic-bezier(.16, 1, .3, 1);
    --bz-transition-alt: all .5s cubic-bezier(.16, 1, .3, 1);
}

/* The mockup styled bare `body`. Scoped to the page's own body class so the
   portal header and footer keep their own typography. */
body.um-business-body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #fcfdfc;
    background-image: radial-gradient(rgba(176, 141, 72, .04) 1.5px, transparent 1.5px);
    background-size: 50px 50px;
    color: #121212;
    -webkit-font-smoothing: antialiased;
}

.um-business { font-family: 'Plus Jakarta Sans', sans-serif; }
.um-business .bz-container { max-width: 1200px; margin: 0 auto; padding: 60px 24px 0; }


/* ---------------------------------------------------------------------------
   PAGE TITLE
   Gradient-clipped text. The `color` fallback matters: if background-clip
   fails, transparent fill would render the title invisible.
   ------------------------------------------------------------------------- */
.um-business .bz-header-premium { text-align: center; margin-bottom: 120px; }
.um-business .bz-main-title {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
    margin: 0;
    background: linear-gradient(135deg, #1b5e46 0%, var(--bz-forest) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bz-heading);
}


/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.um-business .bz-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 120px;
    align-items: center;
    margin-bottom: 140px;
}
.um-business .bz-hexagon-scene { position: relative; }
.um-business .bz-hexagon-frame {
    position: relative;
    width: 420px;
    max-width: 100%;
    height: 460px;
    transition: var(--bz-transition);
    filter:
        drop-shadow(0 10px 10px rgba(0, 0, 0, .02))
        drop-shadow(0 30px 40px rgba(13, 46, 33, .12))
        drop-shadow(0 60px 90px rgba(0, 0, 0, .08));
}
.um-business .bz-hexagon-box {
    width: 100%;
    height: 100%;
    background: var(--bz-forest);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
}
.um-business .bz-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
}
.um-business .bz-hexagon-frame:hover { transform: translateY(-15px) scale(1.02); }
.um-business .bz-hexagon-frame:hover .bz-profile-img { transform: scale(1.15); }

/* The Corporate Housing / Executive Workspace cards that used to sit under this
   copy are hidden (see the Blade comment in the business views), so the column
   now holds only the heading and its description. Centre them rather than
   leaving them flush-left against a tall empty space beside the hexagon. */
.um-business .bz-hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.um-business .bz-hero-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--bz-heading);
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}
.um-business .bz-hero-desc {
    font-size: 20px;
    color: var(--bz-text-muted);
    /* Was 48px to clear the cards below; nothing follows it now. */
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
    line-height: 1.8;
    font-weight: 300;
}

.um-business .bz-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.um-business .bz-card-platinum {
    background: var(--bz-card-bg);
    padding: 40px;
    border-radius: 40px;
    border: 1px solid rgba(0, 0, 0, .03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .02);
    transition: var(--bz-transition);
}
.um-business .bz-card-platinum:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 70px rgba(0, 0, 0, .05);
    border-color: rgba(176, 141, 72, .2);
}
.um-business .bz-icon-box-premium {
    width: 60px;
    height: 60px;
    background: var(--bz-soft-bg);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-gold);
    margin-bottom: 24px;
}
.um-business .bz-card-platinum h3 { font-size: 22px; margin-bottom: 20px; color: var(--bz-heading); }
.um-business .bz-list-premium { list-style: none; padding: 0; margin: 0; }
.um-business .bz-list-premium li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--bz-text-muted);
    margin-bottom: 12px;
}


/* ---------------------------------------------------------------------------
   DARK FEATURE BAR
   The mockup carried this gradient in an inline style="" attribute, which dark
   mode could only have overridden with !important. Moved into the class.
   ------------------------------------------------------------------------- */
.um-business .bz-feature-bar-dark {
    background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%);
    border: 1px solid rgba(176, 141, 72, .2);
    border-radius: 50px;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    color: #fff;
    margin-bottom: 120px;
    box-shadow: 0 40px 80px rgba(5, 20, 15, .3);
}
.um-business .bz-feat-item {
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .05);
    padding: 0 20px;
}
.um-business .bz-feat-item:last-child { border: none; }
.um-business .bz-feat-item i { color: var(--bz-gold); margin-bottom: 24px; display: block; }
.um-business .bz-feat-item svg { margin: 0 auto 24px; display: block; color: var(--bz-gold); }
.um-business .bz-feat-item strong { display: block; font-size: 16px; margin-bottom: 8px; letter-spacing: .5px; }
.um-business .bz-feat-item span { font-size: 13px; opacity: .5; font-weight: 300; }


/* ---------------------------------------------------------------------------
   STRATEGIC ADVANTAGES
   ------------------------------------------------------------------------- */
.um-business .bz-advantages-section { margin-bottom: 120px; }
.um-business .bz-header-alt { text-align: center; margin-bottom: 80px; }
.um-business .bz-header-alt span {
    color: var(--bz-gold);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 12px;
}
.um-business .bz-header-alt h2 {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--bz-heading);
    margin-bottom: 24px;
    line-height: 1.2;
}
.um-business .bz-header-alt p {
    font-size: 18px;
    color: var(--bz-text-muted-alt);
    max-width: 800px;
    margin: 0 auto;
    font-weight: 300;
}

.um-business .bz-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.um-business .bz-card-advantage {
    background: var(--bz-card-bg);
    padding: 48px 32px;
    border-radius: 32px;
    border: 1px solid rgba(13, 46, 33, .04);
    box-shadow: var(--bz-card-shadow);
    transition: var(--bz-transition-alt);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.um-business .bz-card-advantage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--bz-forest), var(--bz-gold));
    opacity: 0;
    transition: var(--bz-transition-alt);
}
.um-business .bz-card-advantage:hover {
    transform: translateY(-12px);
    box-shadow: var(--bz-card-hover);
    border-color: rgba(176, 141, 72, .2);
}
.um-business .bz-card-advantage:hover::before { opacity: 1; }

.um-business .bz-icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--bz-soft-bg);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bz-gold);
    margin-bottom: 32px;
    transition: var(--bz-transition-alt);
}
.um-business .bz-card-advantage:hover .bz-icon-wrapper {
    background: var(--bz-forest);
    color: #fff;
    transform: rotate(-5deg) scale(1.1);
}
.um-business .bz-card-advantage h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bz-heading);
    margin-bottom: 16px;
    letter-spacing: -.5px;
}
.um-business .bz-card-advantage p {
    font-size: 15px;
    color: var(--bz-text-muted-alt);
    font-weight: 400;
}


/* ---------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
.um-business .bz-action-area { display: flex; justify-content: center; margin-top: 40px; padding-bottom: 100px; }
.um-business .bz-btn-consult {
    background: var(--bz-green);
    color: #fff;
    padding: 24px 64px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--bz-transition);
    box-shadow: 0 15px 35px rgba(176, 141, 72, .3);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 1px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.um-business .bz-btn-consult:hover {
    background: var(--bz-gold-light);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 25px 50px rgba(176, 141, 72, .4);
}


/* ---------------------------------------------------------------------------
   CONTACT MODAL  (WhatsApp + Email only — Telepon removed)
   z-index is raised to 10000 in um-info-reset.css so it clears the fixed
   portal header (z-index 9999).
   ------------------------------------------------------------------------- */
.um-business.bz-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 20, 15, .3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity .4s ease;
    padding: 20px;
}
.um-business.bz-modal-overlay.bz-active { display: flex; opacity: 1; }

.um-business .bz-modal-content {
    background: var(--bz-card-bg);
    width: 100%;
    max-width: 450px;
    border-radius: 40px;
    padding: 48px;
    position: relative;
    transform: translateY(40px);
    transition: var(--bz-transition);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .1);
}
.um-business.bz-modal-overlay.bz-active .bz-modal-content { transform: translateY(0); }

.um-business .bz-close-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
    opacity: .3;
    transition: .3s;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    line-height: 1;
}
.um-business .bz-close-modal:hover { opacity: 1; }

.um-business .bz-modal-title {
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
    color: var(--bz-heading);
}
.um-business .bz-modal-subtitle {
    font-size: 14px;
    text-align: center;
    color: var(--bz-text-muted);
    margin-bottom: 40px;
}

.um-business .bz-contact-option {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 24px;
    background: var(--bz-soft-bg);
    text-decoration: none;
    color: var(--bz-text-main);
    margin-bottom: 16px;
    transition: .3s;
    border: 1px solid transparent;
}
.um-business .bz-contact-option:hover {
    background: var(--bz-card-bg);
    border-color: var(--bz-gold);
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}
.um-business .bz-contact-option i,
.um-business .bz-contact-option svg { color: var(--bz-gold); flex-shrink: 0; }
.um-business .bz-contact-text b { display: block; font-size: 16px; }
.um-business .bz-contact-text span { font-size: 12px; opacity: .6; }


/* ---------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .um-business .bz-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 60px; }
    .um-business .bz-hexagon-scene { order: -1; display: flex; justify-content: center; }
    .um-business .bz-feature-bar-dark { grid-template-columns: 1fr 1fr; gap: 40px; }
    .um-business .bz-feat-item { border-right: none; }
    .um-business .bz-card-row { grid-template-columns: 1fr; }
    .um-business .bz-header-premium { margin-bottom: 60px; }
}
@media (max-width: 768px) {
    .um-business .bz-header-alt h2 { font-size: 32px; }
    .um-business .bz-main-title { font-size: 42px; letter-spacing: -1.5px; }
    .um-business .bz-container { padding: 30px 20px 0; }
    .um-business .bz-feature-bar-dark { grid-template-columns: 1fr; border-radius: 32px; padding: 48px 24px; }
    .um-business .bz-hexagon-frame { width: 300px; height: 330px; }
    .um-business .bz-modal-content { padding: 32px 24px; border-radius: 28px; }
    .um-business .bz-btn-consult { padding: 18px 40px; }
}


/* ===========================================================================
   DARK MODE
   Token flip, plus the surfaces the mockup hardcoded.
   =========================================================================== */
html.dark body.um-business-body {
    background-color: #05140f;
    background-image: radial-gradient(rgba(176, 141, 72, .10) 1.5px, transparent 1.5px);
    color: #eef2f0;
}

html.dark .um-business {
    --bz-heading:        #e8f0ec;
    --bz-text-main:      #eef2f0;
    --bz-text-muted:     #93a49c;
    --bz-text-muted-alt: #8fa199;
    --bz-soft-bg:        #0d2e21;
    --bz-card-bg:        #0b201a;
    --bz-neutral-bg:     #05140f;
    --bz-card-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    --bz-card-hover:  0 20px 50px rgba(0, 0, 0, .65);
}

/* The gradient-clipped title would be near-invisible against the dark ground —
   swap the green gradient for the gold one. */
html.dark .um-business .bz-main-title {
    background: linear-gradient(135deg, #c9a664 0%, #b08d48 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #c9a664;
}

html.dark .um-business .bz-card-platinum,
html.dark .um-business .bz-card-advantage { border-color: rgba(176, 141, 72, .18); }

html.dark .um-business .bz-feature-bar-dark {
    background: linear-gradient(135deg, #123528 0%, #05140f 100%);
}

/* The hexagon keeps its forest fill in dark mode — it is a surface, not ink,
   which is exactly why --bz-forest was split from --bz-heading. */
html.dark .um-business .bz-hexagon-box { background: #0d2e21; }

html.dark .um-business.bz-modal-overlay { background: rgba(0, 0, 0, .55); }
html.dark .um-business .bz-contact-option { background: #0d2e21; color: var(--bz-text-main); }
html.dark .um-business .bz-contact-option:hover { background: #123528; }
html.dark .um-business .bz-close-modal { color: #eef2f0; }