/* ============================================================
   Upgrade AI Hero Section
   Scoped to .ug-hero — safe alongside Elate/Bootstrap 3.
   Background image URL is injected dynamically via registerCss().
   ============================================================ */

/* Google Font — Inter (registered via _hero.php) */

:root {
    --ug-rose:        #7b5ea7;
    --ug-rose-dark:   #5d3f8f;
    --ug-rose-light:  #eae0f8;
    --ug-purple:      #7B5EA7;
    --ug-purple-dark: #5D3F8F;
    --ug-purple-mid:  #9B7EC8;
    --ug-purple-lgt:  #EAE0F8;
    --ug-purple-fnt:  #F5F0FE;
    --ug-lav-bg:      #DDD4F0;
    --ug-ink:         #1a1a2e;
    --ug-ink-mid:     #3d3d5c;
    --ug-ink-muted:   #7a7a9a;
    --ug-white:       #ffffff;
    --ug-border:      rgba(123,94,167,.15);
    --ug-shadow-sm:   0 1px 4px rgba(80,50,140,.08);
    --ug-shadow-md:   0 4px 20px rgba(80,50,140,.12);
    --ug-shadow-rose: 0 6px 20px rgba(123,94,167,.35);
    --ug-radius:      18px;
    --ug-radius-sm:   12px;
}

/* ============================================================
   SECTION WRAPPER
   ============================================================ */
.ug-hero {
    position:         relative;
    overflow:         hidden;
    min-height:       100vh;
    background-color: var(--ug-lav-bg);          /* fallback while image loads */
    background-size:  cover;
    background-position: 65% center;
    background-repeat: no-repeat;
    font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Source Sans Pro', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ug-hero *,
.ug-hero *::before,
.ug-hero *::after {
    box-sizing: border-box;
}

.ug-hero-inner {
    max-width:  1280px;
    margin:     0 auto;
    padding:    90px 48px 80px;
    display:    grid;
    grid-template-columns: 1fr 1.2fr;
    gap:        60px;
    align-items: center;
    position:   relative;
    z-index:    2;
}

/* ============================================================
   LEFT CONTENT
   ============================================================ */
.ug-hero-left {
    animation: ugSlideUp .65s ease both;
}
@keyframes ugSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Badge */
.ug-hero-badge {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    background:  rgba(255,255,255,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border:      1px solid rgba(255,255,255,.9);
    color:       var(--ug-purple);
    font-size:   13px;
    font-weight: 700;
    padding:     6px 14px 6px 8px;
    border-radius: 24px;
    margin-bottom: 26px;
    box-shadow:  var(--ug-shadow-sm);
    letter-spacing: .01em;
}
.ug-badge-dot {
    width:        24px;
    height:       24px;
    background:   var(--ug-purple-lgt);
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
}
.ug-badge-dot svg { width: 12px; height: 12px; fill: var(--ug-purple); display: block; }
.ug-badge-pulse {
    width:        7px;
    height:       7px;
    border-radius: 50%;
    background:   var(--ug-purple);
    flex-shrink:  0;
    animation:    ugBadgePulse 2.2s ease infinite;
}
@keyframes ugBadgePulse {
    0%,100% { opacity: 1; transform: scale(1);   }
    50%     { opacity: .5; transform: scale(.75); }
}

/* Heading */
.ug-hero-title {
    font-size:      clamp(38px, 5vw, 66px);
    font-weight:    900;
    line-height:    1.07;
    letter-spacing: -.035em;
    color:          var(--ug-ink);
    margin:         0 0 20px;
}
.ug-hero-title-line2 {
    display:     block;
    color:       var(--ug-purple);
}
.ug-title-seconds {
    font-style:  italic;
    color:       var(--ug-purple-dark);
}

/* Description */
.ug-hero-desc {
    font-size:     16px;
    line-height:   1.7;
    color:         var(--ug-ink-mid);
    margin:        0 0 36px;
    max-width:     440px;
}
.ug-hero-desc strong { color: var(--ug-ink); font-weight: 600; }

/* CTA row */
.ug-hero-cta {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
    margin-bottom: 40px;
}

.ug-btn-primary {
    display:     inline-flex;
    align-items: center;
    gap:         9px;
    height:      50px;
    padding:     0 26px;
    background:  var(--ug-rose);
    color:       var(--ug-white) !important;
    font-size:   15px;
    font-weight: 700;
    border:      none;
    border-radius: 13px;
    cursor:      pointer;
    box-shadow:  var(--ug-shadow-rose);
    transition:  background .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
    text-decoration: none !important;
    font-family: inherit;
    letter-spacing: .01em;
}
.ug-btn-primary:hover,
.ug-btn-primary:focus {
    background:  var(--ug-rose-dark) !important;
    color:       var(--ug-white) !important;
    transform:   translateY(-2px);
    box-shadow:  0 10px 28px rgba(123,94,167,.45);
    text-decoration: none !important;
}
.ug-btn-primary:active { transform: translateY(0); }
.ug-btn-primary svg   { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

.ug-btn-ghost {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    height:      50px;
    padding:     0 20px;
    background:  rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:      1.5px solid rgba(255,255,255,.9);
    border-radius: 13px;
    font-size:   14px;
    font-weight: 600;
    color:       var(--ug-ink-mid) !important;
    box-shadow:  var(--ug-shadow-sm);
    transition:  background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none !important;
    font-family: inherit;
}
.ug-btn-ghost:hover,
.ug-btn-ghost:focus {
    background:   rgba(255,255,255,.95) !important;
    color:        var(--ug-rose) !important;
    text-decoration: none !important;
}
.ug-btn-ghost svg { width: 15px; height: 15px; fill: currentColor; transition: transform .15s; }
.ug-btn-ghost:hover svg { transform: translateX(3px); }

/* Trust chips */
.ug-hero-trust {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.ug-trust-chip {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    background:  rgba(255,255,255,.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:      1px solid rgba(255,255,255,.85);
    border-radius: 20px;
    padding:     5px 12px;
    font-size:   12.5px;
    font-weight: 600;
    color:       var(--ug-ink-mid);
}
.ug-trust-chip b { color: var(--ug-purple); font-weight: 800; }
.ug-trust-sep    { color: var(--ug-purple-mid); font-size: 16px; line-height: 1; opacity: .6; }

/* ============================================================
   RIGHT — Floating cards over 3D background
   ============================================================ */
.ug-hero-right {
    position:  relative;
    height:    500px;
    animation: ugFadeIn .7s .12s ease both;
}
@keyframes ugFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ug-float-card {
    position:   absolute;
    background: #fff;
    border-radius: var(--ug-radius-sm);
    box-shadow: var(--ug-shadow-md), 0 0 0 1px rgba(255,255,255,.6);
    animation:  ugFloatUp .5s ease both;
}
@keyframes ugFloatUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Confirmed badge */
.ug-card-done {
    top:     52px;
    right:   24px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap:     10px;
    animation-delay: 1.2s;
    animation: ugFloatUp .5s 1.2s ease both, ugFloat1 5s 1.7s ease-in-out infinite;
}
@keyframes ugFloat1 {
    0%,100% { transform: translateY(0);    }
    50%     { transform: translateY(-7px); }
}
.ug-done-icon {
    width:        30px;
    height:       30px;
    background:   #d1fae5;
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    flex-shrink:  0;
}
.ug-done-icon svg { width: 15px; height: 15px; fill: #059669; display: block; }
.ug-done-title { font-size: 12px; font-weight: 700; color: #065f46; line-height: 1.2; }
.ug-done-sub   { font-size: 11px; color: var(--ug-ink-muted); margin-top: 2px; }

/* Master card */
.ug-card-master {
    bottom:   90px;
    left:     -16px;
    padding:  12px 15px;
    display:  flex;
    align-items: center;
    gap:      10px;
    min-width: 185px;
    animation-delay: 1.5s;
    animation: ugFloatUp .5s 1.5s ease both, ugFloat2 6s 2s ease-in-out infinite;
}
@keyframes ugFloat2 {
    0%,100% { transform: translateY(0);    }
    50%     { transform: translateY(-6px); }
}
.ug-master-ava {
    width:        38px;
    height:       38px;
    border-radius: 50%;
    background:   linear-gradient(135deg, #d8b4fe, #a78bfa);
    display:      flex;
    align-items:  center;
    justify-content: center;
    font-size:    18px;
    flex-shrink:  0;
}
.ug-master-name { font-size: 12.5px; font-weight: 700; color: var(--ug-ink); }
.ug-master-role { font-size: 11px; color: var(--ug-ink-muted); margin-top: 1px; }
.ug-master-stars { font-size: 10px; margin-top: 3px; }

/* Rating badge */
.ug-card-rating {
    top:     76px;
    left:    -8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap:     8px;
    animation-delay: 1.8s;
    animation: ugFloatUp .5s 1.8s ease both, ugFloat3 4.5s 2.3s ease-in-out infinite;
}
@keyframes ugFloat3 {
    0%,100% { transform: translateY(0);    }
    50%     { transform: translateY(-5px); }
}
.ug-rating-num {
    font-size:   22px;
    font-weight: 900;
    color:       var(--ug-purple);
    line-height: 1;
}
.ug-rating-stars { font-size: 11px; line-height: 1.3; }
.ug-rating-label { font-size: 10px; color: var(--ug-ink-muted); white-space: nowrap; margin-top: 2px; }

/* Service chip */
.ug-card-service {
    bottom:  36px;
    right:   48px;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    gap:     7px;
    animation-delay: 2.1s;
    animation: ugFloatUp .5s 2.1s ease both, ugFloat1 5.5s 2.6s ease-in-out infinite;
}
.ug-service-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--ug-purple); flex-shrink: 0; }
.ug-service-label { font-size: 12px; font-weight: 600; color: var(--ug-ink-mid); white-space: nowrap; }

/* Online indicator */
.ug-card-online {
    top:     172px;
    right:   12px;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    gap:     7px;
    animation-delay: 2.4s;
    animation: ugFloatUp .5s 2.4s ease both, ugFloat2 7s 2.9s ease-in-out infinite;
}
.ug-online-dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   #10b981;
    flex-shrink:  0;
    animation:    ugOnlinePulse 2s ease infinite;
}
@keyframes ugOnlinePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
    50%     { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.ug-online-text { font-size: 12px; font-weight: 600; color: var(--ug-ink-mid); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .ug-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 110px 32px 64px;
    }
    .ug-hero-right { display: none; }
}
@media (max-width: 768px) {
    .ug-hero-inner    { padding: 90px 20px 56px; }
    .ug-hero-title    { font-size: 38px; }
    .ug-hero-desc     { font-size: 15px; }
    .ug-btn-primary,
    .ug-btn-ghost     { height: 46px; font-size: 14px; }
}
@media (max-width: 480px) {
    .ug-hero-cta      { flex-direction: column; align-items: flex-start; }
    .ug-btn-primary,
    .ug-btn-ghost     { width: 100%; justify-content: center; }
}