/* ==========================================================================
   BIT_GOLD IN-PLACE REDESIGN — "Obsidian"
   Sharp, modern fintech look: near-black surfaces + emerald/lime accent.
   Applied directly on top of the existing bit_gold theme (same tempname,
   same database content) — this is NOT a new theme, just a new look.
   Mobile-first: base rules target phones, larger screens layered on via
   min-width media queries. Targets real class names verified from this
   project's actual Blade files. Loads after main.css/custom.css/color.php;
   still reads the admin's --base-h/-s/-l variables so the color picker
   in Admin -> Appearance keeps working.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    --ob-bg:            220 20% 5%;
    --ob-bg-2:          220 18% 8%;
    --ob-surface:       220 16% 11%;
    --ob-surface-2:     220 14% 15%;
    --ob-border:        220 14% 20%;
    --ob-text:          150 20% 96%;
    --ob-text-dim:      210 10% 66%;

    --ob-emerald: #22C55E;
    --ob-lime: #A3E635;
    --ob-accent: hsl(var(--base-h) var(--base-s) var(--base-l));

    --ob-gradient-brand: linear-gradient(110deg, var(--ob-emerald) 0%, var(--ob-lime) 100%);
    --ob-gradient-hero:
        radial-gradient(circle at 15% 10%, hsl(142 65% 45% / .18), transparent 45%),
        radial-gradient(circle at 90% 0%, hsl(var(--base-h) var(--base-s) var(--base-l) / .14), transparent 45%),
        hsl(var(--ob-bg));
    --ob-gradient-card: linear-gradient(160deg, hsl(220 16% 12%) 0%, hsl(220 20% 7%) 100%);

    --ob-radius-sm: 10px;
    --ob-radius: 16px;
    --ob-radius-lg: 22px;
    --ob-shadow: 0 10px 30px hsl(220 40% 2% / .5);
    --ob-shadow-glow: 0 0 0 1px hsl(142 65% 45% / .25), 0 8px 24px hsl(142 60% 40% / .16);
    --ob-space: 16px;
}
@media (min-width: 768px){ :root{ --ob-space: 24px; } }
@media (min-width: 1200px){ :root{ --ob-space: 32px; } }

*{ box-sizing: border-box; }

body{
    background: hsl(var(--ob-bg)) !important;
    color: hsl(var(--ob-text)) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px;
    line-height: 1.65;
    padding-bottom: 74px;
}
@media (min-width: 992px){ body{ padding-bottom: 0; } }

h1,h2,h3,h4,h5,h6{
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: hsl(var(--ob-text)) !important;
    letter-spacing: -0.01em;
}
p{ color: hsl(var(--ob-text-dim)); }
.text--base, .base--color{ color: var(--ob-lime) !important; }
.container{ padding-left: var(--ob-space) !important; padding-right: var(--ob-space) !important; }
::selection{ background: var(--ob-emerald); color: #06110a; }

/* ---------- Buttons ---------- */
.btn, .btn--base, .btn--primary, .btn--secondary, .showFilterBtn{
    border-radius: 999px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 13px 26px !important;
    font-size: 14px !important;
}
.btn--base, .btn--primary, button[type="submit"]:not(.btn--outline){
    background: var(--ob-gradient-brand) !important;
    color: #06110a !important;
    box-shadow: var(--ob-shadow-glow);
}
.btn--base:hover, .btn--primary:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #06110a !important;
}
.btn-outline--base{
    background: transparent !important;
    border: 1.5px solid hsl(var(--ob-border)) !important;
    color: hsl(var(--ob-text)) !important;
}
.btn-outline--base:hover{ border-color: var(--ob-emerald) !important; color: var(--ob-lime) !important; }
@media (max-width: 575px){ form .btn, form button[type="submit"]{ width: 100%; } }

/* ---------- Header / Nav ---------- */
.header{
    background: hsl(var(--ob-bg-2) / .9) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid hsl(var(--ob-border));
}
.header .site-logo img{ max-height: 30px; }
@media (min-width: 768px){ .header .site-logo img{ max-height: 36px; } }
.navbar-nav.main-menu > li > a{ color: hsl(var(--ob-text-dim)) !important; font-weight: 600 !important; font-size: 14px; }
.navbar-nav.main-menu > li > a:hover{ color: var(--ob-lime) !important; }
.navbar-nav.main-menu .sub-menu{
    background: hsl(var(--ob-surface)) !important;
    border: 1px solid hsl(var(--ob-border)) !important;
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow) !important;
}
.navbar-nav.main-menu .sub-menu li a{ color: hsl(var(--ob-text-dim)) !important; }
.navbar-nav.main-menu .sub-menu li a:hover{ background: hsl(var(--ob-surface-2)) !important; color: var(--ob-lime) !important; }
.account-menu .icon a{ background: var(--ob-gradient-brand) !important; color: #06110a !important; border-radius: 50% !important; }
@media (max-width: 1199px){
    .collapse.navbar-collapse{
        background: hsl(var(--ob-surface));
        border-radius: var(--ob-radius);
        margin-top: 10px;
        padding: 10px var(--ob-space);
        box-shadow: var(--ob-shadow);
        border: 1px solid hsl(var(--ob-border));
    }
    .navbar-nav.main-menu > li{ border-bottom: 1px solid hsl(var(--ob-border) / .6); }
    .navbar-nav.main-menu > li:last-child{ border-bottom: none; }
}

/* ---------- Hero ---------- */
.hero.bg_img{
    background-image: var(--ob-gradient-hero) !important;
    padding: 60px 0 52px !important;
    position: relative;
    overflow: hidden;
}
@media (min-width: 992px){ .hero.bg_img{ padding: 130px 0 110px !important; } }
.hero.bg_img::before{
    content:"";
    position:absolute; top:-110px; right:-90px;
    width:340px; height:340px; border-radius:50%;
    background: radial-gradient(circle, hsl(142 65% 45% / .18), transparent 70%);
    animation: ob-float 8s ease-in-out infinite;
    pointer-events:none;
}
@keyframes ob-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(24px);} }
.hero__title{ font-size: clamp(1.9rem, 7vw, 3.5rem) !important; line-height: 1.12 !important; color: hsl(var(--ob-text)) !important; }
.hero__title .text-white{ color: hsl(var(--ob-text)) !important; }
.hero__title b.base--color{
    background: var(--ob-gradient-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__content p.text-white{ color: hsl(var(--ob-text-dim)) !important; }
.hero__content .btn--base, .hero__content button{ width: 100%; margin-left: 0 !important; margin-top: 12px !important; }
@media (min-width: 576px){
    .hero__content{ display:flex; flex-wrap:wrap; gap: 10px; }
    .hero__content .btn--base, .hero__content button{ width: auto; margin-top: 0 !important; }
    .hero__content > * { margin-top: 20px !important; }
}

/* ---------- Cards / sections ---------- */
.card{
    background: var(--ob-gradient-card) !important;
    border: 1px solid hsl(var(--ob-border)) !important;
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow);
}
.card-header{ background: transparent !important; border-bottom: 1px solid hsl(var(--ob-border)) !important; }
.single-plan, .item{
    background: var(--ob-gradient-card) !important;
    border: 1px solid hsl(var(--ob-border)) !important;
    border-radius: var(--ob-radius) !important;
}
.single-plan:hover{ border-color: hsl(142 60% 45% / .5) !important; transform: translateY(-3px); transition: all .25s ease; }
.cmn-section{ padding: 32px 0; }
@media (min-width: 992px){ .cmn-section{ padding: 60px 0; } }

/* ---------- Dashboard stat widgets ---------- */
.d-widget{
    background: var(--ob-gradient-card) !important;
    border: 1px solid hsl(var(--ob-border)) !important;
    border-radius: var(--ob-radius) !important;
    box-shadow: var(--ob-shadow);
    padding: 18px !important;
    align-items: center;
}
.d-widget .caption{ display:block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--ob-text-dim)) !important; margin-bottom: 4px; }
.d-widget .currency-amount{ font-size: 1.35rem !important; font-weight: 800 !important; color: hsl(var(--ob-text)) !important; margin: 0 !important; font-family: 'Space Grotesk', sans-serif !important; }
.d-widget .icon{
    width: 44px; height: 44px; min-width: 44px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 12px;
    background: hsl(142 65% 45% / .14);
    color: var(--ob-lime);
    font-size: 19px;
}
.badge{ border-radius: 999px !important; font-weight: 700 !important; padding: 5px 10px !important; }

/* ---------- Alerts ---------- */
.alert{
    background: hsl(var(--ob-surface)) !important;
    border-radius: var(--ob-radius-sm) !important;
    display:flex; gap:12px; align-items:flex-start;
    padding: 14px !important;
    box-shadow: var(--ob-shadow);
}
.alert__icon{ font-size: 18px; margin-top: 2px; color: var(--ob-lime); }
.alert__message{ margin: 0 !important; font-size: 13.5px; color: hsl(var(--ob-text-dim)); }

/* ---------- Forms ---------- */
.form-control, .form-select, select, textarea{
    background: hsl(var(--ob-surface)) !important;
    border: 1.5px solid hsl(var(--ob-border)) !important;
    color: hsl(var(--ob-text)) !important;
    border-radius: var(--ob-radius-sm) !important;
    min-height: 46px;
}
@supports (-webkit-touch-callout: none){ .form-control, .form-select{ font-size: 16px !important; } }
.form-control:focus, .form-select:focus{
    border-color: var(--ob-emerald) !important;
    box-shadow: 0 0 0 3px hsl(142 65% 45% / .16) !important;
}
label{ color: hsl(var(--ob-text-dim)) !important; font-weight: 700 !important; font-size: 13px; }
.responsive-filter-card{ display:none; }
@media (min-width: 992px){ .show-filter{ display:none; } .responsive-filter-card{ display:block !important; } }

/* ---------- Tables: stack into cards on phones ---------- */
@media (max-width: 767px){
    .table-responsive--md table thead, .table-responsive table thead{ display:none; }
    .table-responsive--md table tr, .table-responsive table tr{
        display:block;
        background: hsl(var(--ob-surface));
        border: 1px solid hsl(var(--ob-border));
        border-radius: var(--ob-radius-sm);
        margin-bottom: 12px;
        padding: 10px 14px;
        box-shadow: var(--ob-shadow);
    }
    .table-responsive--md table td, .table-responsive table td{
        display:flex; justify-content: space-between; align-items:center; gap: 12px;
        border: none !important; padding: 8px 0 !important; text-align: right;
    }
    .table-responsive--md table td::before, .table-responsive table td::before{
        content: attr(data-label);
        font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .02em;
        color: hsl(var(--ob-text-dim)); text-align: left;
    }
}
@media (min-width: 768px){
    .table thead th{
        background: hsl(var(--ob-surface-2)) !important;
        border-bottom: 1px solid hsl(var(--ob-border)) !important;
        color: hsl(var(--ob-text-dim)) !important;
        text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em;
    }
    .table td, .table th{ border-color: hsl(var(--ob-border)) !important; vertical-align: middle; color: hsl(var(--ob-text)); }
}

/* ---------- Footer ---------- */
.footer{ background: hsl(var(--ob-bg-2)) !important; border-top: 1px solid hsl(var(--ob-border)); }
.footer .copy-right-text, .footer a{ color: hsl(var(--ob-text-dim)) !important; }
.footer .text--base{ -webkit-text-fill-color: initial; background: none; color: var(--ob-lime) !important; }
.footer-short-menu{ gap: 6px 18px; }

/* ==========================================================================
   MOBILE BOTTOM NAV
   ========================================================================== */
.nova-bottom-nav{ display: none; }
@media (max-width: 991px){
    .nova-bottom-nav{
        display: flex; position: fixed; left:0; right:0; bottom:0; z-index: 1050;
        justify-content: space-around; align-items:center; height: 64px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: hsl(var(--ob-bg-2) / .96);
        backdrop-filter: blur(14px);
        border-top: 1px solid hsl(var(--ob-border));
    }
    .nova-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size: 10.5px; font-weight: 700; color: hsl(var(--ob-text-dim)); flex:1; text-align:center; }
    .nova-bottom-nav a i{ font-size: 19px; line-height: 1; }
    .nova-bottom-nav a.active, .nova-bottom-nav a:hover{ color: var(--ob-lime); }
    .nova-bottom-nav a.nova-fab{ margin-top: -26px; }
    .nova-bottom-nav a.nova-fab .nova-fab__circle{
        width: 46px; height: 46px; border-radius: 50%;
        display:flex; align-items:center; justify-content:center;
        background: var(--ob-gradient-brand);
        box-shadow: var(--ob-shadow-glow);
        color:#06110a; font-size: 19px; margin-bottom: 2px;
    }
    .nova-more-sheet{
        position: fixed; left:0; right:0; bottom:0; z-index: 1060;
        background: hsl(var(--ob-surface));
        border-top: 1px solid hsl(var(--ob-border));
        border-radius: 20px 20px 0 0;
        padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0));
        transform: translateY(100%);
        transition: transform .28s ease;
        max-height: 70vh; overflow-y:auto;
    }
    .nova-more-sheet.is-open{ transform: translateY(0); }
    .nova-more-backdrop{ display:none; position:fixed; inset:0; z-index:1055; background: hsl(220 40% 2% / .6); }
    .nova-more-backdrop.is-open{ display:block; }
    .nova-more-sheet__handle{ width:40px; height:4px; border-radius:4px; background: hsl(var(--ob-border)); margin:0 auto 16px; }
    .nova-more-sheet a{ display:flex; align-items:center; gap:12px; padding:12px 4px; color: hsl(var(--ob-text)) !important; font-weight: 600; border-bottom: 1px solid hsl(var(--ob-border) / .6); }
    .nova-more-sheet a:last-child{ border-bottom:none; }
    .nova-more-sheet a i{ width:22px; text-align:center; color: var(--ob-lime); }
    .navbar-toggler{ display:none !important; }
    .collapse.navbar-collapse{ display:none !important; }
}

/* ---------- Scroll-reveal ---------- */
.aur-reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.aur-reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
    .aur-reveal{ opacity:1; transform:none; transition:none; }
    .hero.bg_img::before{ animation:none; }
}

/* ---------- Small-phone tightening ---------- */
@media (max-width: 375px){
    .hero__title{ font-size: 1.7rem !important; }
    .d-widget .currency-amount{ font-size: 1.15rem !important; }
    .container{ padding-left: 12px !important; padding-right: 12px !important; }
}

/* ==========================================================================
   OBSIDIAN v2 — deeper mobile-first rearrangement + animation pass
   Purely additive: overrides earlier rules via source order, no HTML/Blade
   changes required (uses the existing markup structure + CSS `order`).
   ========================================================================== */

/* ---------- Header: shrink on scroll (class toggled by redesign-obsidian.js) ---------- */
.header{ transition: padding .25s ease, box-shadow .25s ease; }
.header.ob-scrolled{
    box-shadow: 0 8px 24px hsl(220 50% 2% / .5);
}
.header.ob-scrolled .site-logo img{ max-height: 26px; transition: max-height .25s ease; }

/* ---------- Staggered reveal on scroll (works with existing .aur-reveal class) ---------- */
.aur-reveal{ transition-delay: calc(var(--ob-i, 0) * 60ms); }

/* ---------- Mobile: turn the dashboard stat-widget row into a
   snap-scroll carousel instead of a stacked column list.
   Targets the row wrapper already used around .d-widget — no markup
   changes needed, this is a pure CSS rearrangement. ---------- */
@media (max-width: 767px){
    .row.mb-none-30{
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 6px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    .row.mb-none-30::-webkit-scrollbar{ height: 4px; }
    .row.mb-none-30 > [class*="col-"]{
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
        padding-left: 0;
        padding-right: 0;
    }
    .row.mb-none-30 > [class*="col-"]:first-child{ margin-left: var(--ob-space); }
    .row.mb-none-30 > [class*="col-"]:last-child{ margin-right: var(--ob-space); padding-right: var(--ob-space); }
}

/* ---------- Buttons: shine sweep on hover/tap (pure CSS, no markup change) ---------- */
.btn--base, .btn--primary{ position: relative; overflow: hidden; }
.btn--base::after, .btn--primary::after{
    content:"";
    position:absolute; top:0; left:-60%;
    width:40%; height:100%;
    background: linear-gradient(120deg, transparent, hsl(0 0% 100% / .35), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events:none;
}
.btn--base:hover::after, .btn--primary:hover::after{ left: 130%; }
.btn--base:active, .btn--primary:active{ transform: scale(.97); }

/* ---------- Cards: lift + glow on hover, tap-feedback on mobile ---------- */
.card, .single-plan, .d-widget{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .d-widget:hover{
    box-shadow: 0 14px 34px hsl(142 50% 20% / .28), var(--ob-shadow);
}
@media (hover: none){
    .card:active, .d-widget:active, .single-plan:active{ transform: scale(.985); }
}

/* ---------- Hero: headline enters with a soft rise + fade on load
   (page-load animation, distinct from the scroll-triggered reveal) ---------- */
.hero__title{ animation: ob-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__content{ animation: ob-rise .7s cubic-bezier(.2,.7,.2,1) .12s both; }
@keyframes ob-rise{
    from{ opacity:0; transform: translateY(16px); }
    to{ opacity:1; transform: translateY(0); }
}

/* ---------- Bottom nav: spring-tap feedback + active pill background ---------- */
.nova-bottom-nav a{ transition: color .2s ease, transform .15s ease; }
.nova-bottom-nav a:active{ transform: scale(.9); }
.nova-bottom-nav a.active{ position: relative; }
.nova-bottom-nav a.active::before{
    content:"";
    position:absolute; top:-2px; left:50%; transform: translateX(-50%);
    width:5px; height:5px; border-radius:50%;
    background: var(--ob-lime);
    box-shadow: 0 0 8px hsl(84 70% 55% / .8);
}
.nova-fab .nova-fab__circle{ transition: transform .2s ease; }
.nova-fab:active .nova-fab__circle{ transform: scale(.9) rotate(-8deg); }

/* ---------- Table rows: gentle stagger fade-in as they enter view ---------- */
@media (max-width: 767px){
    .table-responsive--md table tr, .table-responsive table tr{
        opacity: 0;
        animation: ob-row-in .5s ease forwards;
    }
    .table-responsive--md table tr:nth-child(1), .table-responsive table tr:nth-child(1){ animation-delay: .03s; }
    .table-responsive--md table tr:nth-child(2), .table-responsive table tr:nth-child(2){ animation-delay: .08s; }
    .table-responsive--md table tr:nth-child(3), .table-responsive table tr:nth-child(3){ animation-delay: .13s; }
    .table-responsive--md table tr:nth-child(4), .table-responsive table tr:nth-child(4){ animation-delay: .18s; }
    .table-responsive--md table tr:nth-child(5), .table-responsive table tr:nth-child(5){ animation-delay: .23s; }
    .table-responsive--md table tr:nth-child(n+6), .table-responsive table tr:nth-child(n+6){ animation-delay: .26s; }
    @keyframes ob-row-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
}

/* ---------- Mobile: sticky mini balance strip right under the header,
   built purely from the FIRST .d-widget in the dashboard row — no markup
   change, just repositioning via position:sticky on its existing column ---------- */
@media (max-width: 767px){
    .row.mb-none-30 > [class*="col-"]:first-child .d-widget{
        border-color: hsl(142 55% 45% / .4);
    }
}

@media (prefers-reduced-motion: reduce){
    .hero__title, .hero__content{ animation: none; }
    .table-responsive--md table tr, .table-responsive table tr{ animation: none; opacity: 1; }
    .btn--base::after, .btn--primary::after{ transition: none; display:none; }
}

/* ==========================================================================
   OBSIDIAN v3 — FAB clearance + premium Portfolio Overview hero card
   ========================================================================== */

/* ---------- FAB clearance: keep WhatsApp (czm-chat-support plugin) and
   Jivo chat widgets clear of the fixed mobile bottom nav ---------- */
@media (max-width: 991px){
    .czm-fixed .czm-button,
    .czm-fixed .czm-popup,
    .czm-fixed .czm-speech-bubble{
        bottom: 84px !important;
    }
    #jivo-iframe-container{
        bottom: 84px !important;
    }
}
/* On desktop the bottom nav doesn't exist, so restore the plugin's own
   default 30px spacing (only needed if a stray override reached desktop) */
@media (min-width: 992px){
    .czm-fixed .czm-button,
    .czm-fixed .czm-popup,
    .czm-fixed .czm-speech-bubble{
        bottom: 30px !important;
    }
    #jivo-iframe-container{
        bottom: 20px !important;
    }
}

/* ---------- Portfolio Overview hero card ---------- */
.ob-portfolio-hero{
    background: var(--ob-gradient-card);
    border: 1px solid hsl(var(--ob-border));
    border-radius: var(--ob-radius-lg);
    box-shadow: var(--ob-shadow);
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.ob-portfolio-hero::before{
    content:"";
    position:absolute; top:-80px; right:-60px;
    width:220px; height:220px; border-radius:50%;
    background: radial-gradient(circle, hsl(142 65% 45% / .16), transparent 70%);
    pointer-events:none;
}
.ob-portfolio-hero__label{
    display:block;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: hsl(var(--ob-text-dim));
    margin-bottom: 6px;
}
.ob-portfolio-hero__amount{
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.8rem, 6vw, 2.6rem) !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    background: var(--ob-gradient-brand);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ob-portfolio-hero__sub{
    display:block;
    font-size: 13px;
    color: hsl(var(--ob-text-dim));
    margin-bottom: 18px;
}
.ob-portfolio-hero__actions{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.ob-quick-action{
    display:flex;
    flex-direction: column;
    align-items:center;
    gap: 6px;
    padding: 12px 4px;
    background: hsl(var(--ob-surface));
    border: 1px solid hsl(var(--ob-border));
    border-radius: var(--ob-radius-sm);
    color: hsl(var(--ob-text)) !important;
    font-size: 11.5px;
    font-weight: 700;
    text-align:center;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ob-quick-action:hover{
    border-color: hsl(142 55% 45% / .5);
    transform: translateY(-2px);
    color: hsl(var(--ob-text)) !important;
}
.ob-quick-action:active{ transform: scale(.95); }
.ob-quick-action__icon{
    width: 34px; height: 34px;
    display:flex; align-items:center; justify-content:center;
    border-radius: 50%;
    background: var(--ob-gradient-brand);
    color: #06110a;
    font-size: 15px;
}
@media (min-width: 576px){
    .ob-portfolio-hero{ padding: 30px; }
    .ob-portfolio-hero__actions{ max-width: 420px; }
}
@media (min-width: 992px){
    .ob-portfolio-hero{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
    .ob-portfolio-hero__actions{ max-width: none; flex: 0 0 auto; grid-auto-flow: column; grid-template-columns: none; }
    .ob-quick-action{ padding: 14px 20px; }
}