/* ================================================================
   SPONXMEDIA — MARKETING & MEDIA WEBSITE
   Vibrant Palette: Coral #FF6B6B | Violet #7C3AED | Gold #F59E0B
   Light, energetic, bold — made for a creative agency
   ================================================================ */

/* ── GOOGLE FONTS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    /* Brand Colors */
    --coral:       #FF6B6B;
    --coral-dark:  #E85555;
    --coral-light: #FFE8E8;
    --violet:      #7C3AED;
    --violet-dark: #6D28D9;
    --violet-light:#EDE9FE;
    --gold:        #F59E0B;
    --gold-dark:   #D97706;
    --gold-light:  #FEF3C7;
    --teal:        #0EA5E9;
    --teal-light:  #E0F2FE;
    --green:       #10B981;
    --green-light: #D1FAE5;

    /* Neutrals */
    --white:       #FFFFFF;
    --off-white:   #FAFAFA;
    --gray-50:     #F9FAFB;
    --gray-100:    #F3F4F6;
    --gray-200:    #E5E7EB;
    --gray-400:    #9CA3AF;
    --gray-600:    #4B5563;
    --gray-800:    #1F2937;
    --gray-900:    #111827;

    /* Gradients */
    --grad-primary:     linear-gradient(135deg, var(--coral), var(--violet));
    --grad-warm:        linear-gradient(135deg, var(--coral), var(--gold));
    --grad-cool:        linear-gradient(135deg, var(--violet), var(--teal));
    --grad-hero-bg:     linear-gradient(135deg, #FFF5F5 0%, #F5F3FF 50%, #EFF6FF 100%);
    --grad-cta-bg:      linear-gradient(135deg, var(--violet) 0%, var(--coral) 100%);
    --grad-stats-bg:    linear-gradient(135deg, #1E1B4B 0%, #4C1D95 50%, #831843 100%);

    /* Shadows */
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
    --shadow-lg:    0 10px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
    --shadow-xl:    0 20px 60px rgba(0,0,0,.15);
    --shadow-coral: 0 8px 32px rgba(255,107,107,.30);
    --shadow-violet:0 8px 32px rgba(124,58,237,.25);

    /* Typography */
    --font-head: 'Poppins', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-accent: 'Playfair Display', serif;

    /* Spacing & Radius */
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-full:9999px;

    /* Transitions */
    --ease:        cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-bounce: cubic-bezier(.68, -0.55, .27, 1.55);
    --transition:  .3s var(--ease);
}

/* ── GLOBAL RESET ───────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:80px; }

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--gray-800);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width:100%; display:block; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--grad-primary); border-radius:3px; }
::selection { background:rgba(124,58,237,.15); color:var(--violet); }

/* ================================================================
   HEADER & NAVIGATION
   ================================================================ */
.sponx-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
    transition: box-shadow var(--transition);
}
.sponx-header.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.sponx-nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo */
.sponx-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.logo-mark {
    width: 40px; height: 40px;
    background: var(--grad-primary);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-coral);
    transition: transform var(--transition), box-shadow var(--transition);
}
.sponx-logo:hover .logo-mark {
    transform: rotate(-8deg) scale(1.1);
    box-shadow: var(--shadow-violet);
}
.logo-s {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 20px;
    color: var(--white);
    line-height: 1;
}
.logo-text { display:flex; flex-direction:column; gap:1px; }
.logo-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.logo-tagline { font-size:10px; color:var(--gray-400); letter-spacing:.04em; font-weight:500; }

/* Nav Menu */
.sponx-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sponx-menu li a {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 15px;
    color: var(--gray-700, #374151);
    border-radius: var(--radius-full);
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.sponx-menu li a:hover {
    color: var(--violet);
    background: var(--violet-light);
}

/* ── User Dropdown ────────────────────────────────────────── */
.sponx-user-dropdown-wrap {
    position: relative;
}
.sponx-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--violet-light);
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--violet);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.sponx-user-trigger:hover,
.sponx-user-trigger.active {
    background: var(--white);
    border-color: var(--violet);
    box-shadow: var(--shadow-violet);
}
.sponx-user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--grad-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
    font-family: var(--font-head);
}
.sponx-user-avatar-lg {
    width: 40px; height: 40px;
    font-size: 16px;
}
.sponx-user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sponx-user-caret {
    font-size: 10px;
    transition: transform .25s var(--ease);
}
.sponx-user-trigger.active .sponx-user-caret { transform: rotate(180deg); }

/* Dropdown panel */
.sponx-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 56px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(.97);
    transform-origin: top right;
    transition: opacity .2s var(--ease), transform .25s var(--ease-spring);
    z-index: 2000;
}
.sponx-user-dropdown.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}
.sponx-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--grad-hero-bg);
    border-bottom: 1px solid var(--gray-100);
}
.sponx-user-dropdown-header strong {
    display: block;
    font-size: 14px; font-weight: 700;
    color: var(--gray-900);
}
.sponx-user-dropdown-header span {
    font-size: 12px; color: var(--gray-400);
}
.sponx-user-dropdown-body { padding: 8px; }
.sponx-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px; font-weight: 500;
    color: var(--gray-700, #374151);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}
.sponx-dropdown-item i { font-size: 14px; width: 16px; color: var(--gray-400); transition: color var(--transition); }
.sponx-dropdown-item:hover { background: var(--violet-light); color: var(--violet); }
.sponx-dropdown-item:hover i { color: var(--violet); }
.sponx-dropdown-divider { height: 1px; background: var(--gray-100); margin: 4px 8px; }
.sponx-dropdown-logout { color: var(--coral-dark); }
.sponx-dropdown-logout i { color: var(--coral); }
.sponx-dropdown-logout:hover { background: var(--coral-light); color: var(--coral-dark); }
.sponx-dropdown-logout:hover i { color: var(--coral-dark); }

/* Mobile dropdown positioning */
.sponx-user-dropdown-mobile {
    right: 0; left: auto;
    top: calc(100% + 8px);
    min-width: 220px;
}
.sponx-user-trigger-mobile {
    padding: 4px;
}

/* ── Sign In / My Account button ─────────────────────────── */
.sponx-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--violet);
    border: 1.5px solid var(--violet-light);
    border-radius: var(--radius-full);
    background: var(--violet-light);
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.sponx-signin-btn:hover {
    background: var(--violet);
    color: var(--white) !important;
    border-color: var(--violet);
    transform: translateY(-1px);
}
.sponx-account-btn {
    background: var(--coral-light);
    color: var(--coral-dark);
    border-color: var(--coral-light);
}
.sponx-account-btn:hover {
    background: var(--coral);
    color: var(--white) !important;
    border-color: var(--coral);
}
/* Mobile sign in icon-only pill */
.sponx-header-right-mobile {
    display: none;
    align-items: center;
    gap: 8px;
}
.sponx-signin-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--violet-light);
    color: var(--violet);
    border-radius: 50%;
    font-size: 16px;
    transition: background var(--transition), color var(--transition);
    text-decoration: none;
}
.sponx-signin-mobile:hover { background: var(--violet); color: var(--white); }
/* Mobile menu sign-in / sign-out links */
.sponx-mobile-signin {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    font-weight: 600; font-size: 14px;
    color: var(--violet);
    border-radius: var(--radius-sm);
    background: var(--violet-light);
    margin-bottom: 4px;
    transition: background var(--transition);
    text-decoration: none;
}
.sponx-mobile-signin:hover { background: var(--violet); color: var(--white); }
.sponx-mobile-signout {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    font-weight: 600; font-size: 14px;
    color: var(--gray-600);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    text-decoration: none;
}
.sponx-mobile-signout:hover { background: var(--gray-100); color: var(--coral); }

/* Contact Button */
.sponx-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--grad-primary);
    color: var(--white) !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-coral);
    transition: transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.sponx-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255,107,107,.4), 0 4px 16px rgba(124,58,237,.3);
}
.sponx-contact-btn:active { transform: translateY(0); }
.sponx-contact-btn-full { width:100%; justify-content:center; }

/* Hamburger */
.sponx-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
}
.sponx-hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--gray-800);
    border-radius: 2px;
    transition: var(--transition);
}
.sponx-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sponx-hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.sponx-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.sponx-mobile-menu {
    display: none;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--gray-100);
    background: var(--white);
}
.sponx-mobile-menu.open { display:block; }
.sponx-mobile-menu ul { display:flex; flex-direction:column; gap:4px; }
.sponx-mobile-menu li a {
    display:block; padding:12px 16px;
    font-weight:500; color:var(--gray-800);
    border-radius:var(--radius-sm);
    transition: background var(--transition);
}
.sponx-mobile-menu li a:hover { background:var(--gray-50); color:var(--violet); }

/* ── MAIN WRAPPER ─────────────────────────────────────────── */
.sponx-main { padding-top: 72px; }

/* ================================================================
   HERO SECTION
   ================================================================ */
.sponx-hero {
    position: relative;
    min-height: calc(100vh - 72px);
    background: var(--grad-hero-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 80px 80px 60px;
    overflow: hidden;
}

/* Animated background shapes */
.hero-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: shapeFloat 8s ease-in-out infinite;
}
.shape-1 {
    width:400px; height:400px;
    background:rgba(255,107,107,.12);
    top:-100px; right:-100px;
    animation-delay: 0s;
}
.shape-2 {
    width:300px; height:300px;
    background:rgba(124,58,237,.10);
    bottom:0; left:-80px;
    animation-delay: -3s;
}
.shape-3 {
    width:200px; height:200px;
    background:rgba(245,158,11,.12);
    top:40%; left:40%;
    animation-delay: -5s;
}
.shape-4 {
    width:150px; height:150px;
    background:rgba(14,165,233,.10);
    top:20%; right:30%;
    animation-delay: -2s;
}
.shape-5 {
    width:100px; height:100px;
    background:rgba(16,185,129,.10);
    bottom:20%; right:20%;
    animation-delay: -7s;
}

@keyframes shapeFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(20px, -30px) scale(1.05); }
    66%       { transform: translate(-15px, 20px) scale(.95); }
}

/* Floating badges */
.hero-badges {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.hero-badge {
    position: absolute;
    padding: 8px 16px;
    background: var(--white);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    animation: badgeFloat 6s ease-in-out infinite;
    pointer-events: none;
}
.badge-1 { top:15%; left:5%; animation-delay:0s; color:var(--coral); border: 1px solid var(--coral-light); }
.badge-2 { top:25%; right:5%; animation-delay:-2s; color:var(--violet); border: 1px solid var(--violet-light); }
.badge-3 { bottom:20%; left:8%; animation-delay:-4s; color:var(--gold-dark); border: 1px solid var(--gold-light); }

@keyframes badgeFloat {
    0%, 100% { transform:translateY(0); }
    50%       { transform:translateY(-12px); }
}

/* Hero Content */
.hero-content { position:relative; z-index:2; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--violet-light);
    color: var(--violet);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: 24px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.eyebrow-dot {
    width:8px; height:8px;
    background:var(--violet);
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hero-title {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--gray-900);
    margin-bottom: 20px;
}
.hero-title-accent {
    display: block;
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-title-line2 { display:block; }

.hero-subtitle {
    font-size: 18px;
    color: var(--gray-600);
    max-width: 520px;
    margin-bottom: 36px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--grad-primary);
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-coral);
    transition: transform var(--transition), box-shadow var(--transition);
}
.hero-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(255,107,107,.4), 0 6px 20px rgba(124,58,237,.3);
}

.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    color: var(--violet);
    font-weight: 600;
    font-size: 16px;
    border: 2px solid var(--violet);
    border-radius: var(--radius-full);
    transition: background var(--transition), color var(--transition);
}
.hero-cta-secondary:hover {
    background: var(--violet);
    color: var(--white);
}

/* Trust signals */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 24px;
}
.trust-item { display:flex; flex-direction:column; gap:2px; }
.trust-item strong { font-size:24px; font-weight:800; color:var(--gray-900); font-family:var(--font-head); }
.trust-item span { font-size:12px; color:var(--gray-400); font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.trust-divider { width:1px; height:36px; background:var(--gray-200); }

/* Hero Visual */
.hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-100);
}

.hero-card-main {
    padding: 28px;
    width: 100%;
    max-width: 400px;
    animation: heroCardFloat 6s ease-in-out infinite;
}
@keyframes heroCardFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%       { transform: translateY(-16px) rotate(1deg); }
}

.hcard-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.hcard-avatar {
    width:40px; height:40px;
    border-radius:50%;
    background: var(--grad-primary);
    flex-shrink: 0;
}
.hcard-info { flex:1; }
.hcard-name { display:block; font-weight:700; font-size:14px; color:var(--gray-900); }
.hcard-date { font-size:12px; color:var(--gray-400); }
.hcard-badge-live {
    font-size:12px; font-weight:700;
    color:var(--green);
    background:var(--green-light);
    padding:4px 10px;
    border-radius:var(--radius-full);
}

.hcard-stats {
    display:grid; grid-template-columns: repeat(3,1fr);
    gap:8px; margin-bottom:16px;
}
.hcard-stat {
    text-align:center;
    background:var(--gray-50);
    padding:10px 6px;
    border-radius:var(--radius-sm);
}
.hcard-stat .stat-up {
    display:block;
    font-weight:800; font-size:15px;
    color:var(--green);
    font-family:var(--font-head);
}
.hcard-stat span:last-child { font-size:11px; color:var(--gray-400); }

.hcard-bar-wrap { display:flex; flex-direction:column; gap:6px; }
.hcard-bar {
    height:8px;
    background: var(--grad-primary);
    border-radius:4px;
    animation: barGrow 2s ease-out forwards;
    transform-origin:left;
}
.hcard-bar-2 { background: var(--grad-warm); animation-delay:.3s; }
.hcard-bar-3 { background: var(--grad-cool); animation-delay:.6s; }
@keyframes barGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* Floating mini cards */
.hero-card-floating-1,
.hero-card-floating-2 {
    position: absolute;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    border-radius: var(--radius-md);
}
.hero-card-floating-1 {
    top: 0; right: -20px;
    color: var(--coral);
    animation: heroCardFloat 5s ease-in-out infinite reverse;
    animation-delay:-2s;
}
.hero-card-floating-2 {
    bottom: 20px; left: -20px;
    color: var(--gold-dark);
    animation: heroCardFloat 7s ease-in-out infinite;
    animation-delay:-4s;
}
.card-icon-instagram { font-size:18px; color:var(--coral); }
.card-icon-fire { font-size:18px; color:var(--gold); }

/* Scroll cue */
.hero-scroll-cue {
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    text-decoration:none;
    animation: scrollBounce 2s ease-in-out infinite;
    z-index:2;
}
.scroll-cue-mouse {
    width:26px; height:40px;
    border:2px solid var(--gray-400);
    border-radius:13px;
    display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue-wheel {
    width:4px; height:8px;
    background:var(--gray-400);
    border-radius:2px;
    animation: scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel { 0%,100%{transform:translateY(0);opacity:1;} 60%{transform:translateY(10px);opacity:0;} }
@keyframes scrollBounce { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-8px);} }

/* ================================================================
   MARQUEE CLIENTS BAND
   ================================================================ */
.sponx-marquee-band {
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    padding: 20px 0;
    overflow: hidden;
}
.marquee-label {
    text-align:center;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gray-400);
    margin-bottom:12px;
}
.marquee-track { overflow:hidden; }
.marquee-inner {
    display:flex; gap:48px;
    width:max-content;
    animation:marqueeScroll 30s linear infinite;
}
.marquee-item {
    font-size:15px;
    font-weight:600;
    color:var(--gray-600);
    white-space:nowrap;
    padding:0 8px;
    transition:color var(--transition);
}
.marquee-item:hover { color:var(--violet); }
@keyframes marqueeScroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* ================================================================
   SHARED SECTION STYLES
   ================================================================ */
.sponx-section {
    padding: 100px 0;
}
.section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}
.section-header {
    text-align:center;
    max-width:680px;
    margin:0 auto 64px;
}
.section-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 16px;
    background:var(--coral-light);
    color:var(--coral-dark);
    font-size:13px;
    font-weight:700;
    border-radius:var(--radius-full);
    margin-bottom:16px;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.section-title {
    font-family:var(--font-head);
    font-size:clamp(28px, 4vw, 44px);
    font-weight:800;
    line-height:1.15;
    color:var(--gray-900);
    margin-bottom:16px;
}
.section-title em {
    font-style:italic;
    font-family:var(--font-accent);
    color:var(--coral);
    -webkit-text-fill-color: var(--coral);
}
.section-subtitle {
    font-size:17px;
    color:var(--gray-600);
    line-height:1.7;
}
.accent-text {
    background:var(--grad-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* Generic Buttons */
.sponx-btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px;
    background:var(--grad-primary);
    color:var(--white);
    font-family:var(--font-head);
    font-weight:700; font-size:15px;
    border-radius:var(--radius-full);
    box-shadow:var(--shadow-coral);
    transition:transform var(--transition), box-shadow var(--transition);
}
.sponx-btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 16px 48px rgba(255,107,107,.4);
}

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.sponx-about { background:var(--white); }

.about-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:80px; align-items:center;
}

.about-img-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px;
    gap:12px;
    position:relative;
}
.about-img { border-radius:var(--radius-lg); overflow:hidden; }
.about-img img { width:100%; height:100%; object-fit:cover; }
.about-img-1 { grid-column:1; grid-row:1; }
.about-img-2 { grid-column:2; grid-row:1 / 3; }
.about-img-3 { grid-column:1; grid-row:2; }

.about-badge-float {
    position:absolute;
    bottom:-16px; left:50%; transform:translateX(-50%);
    background:var(--white);
    border:2px solid var(--coral-light);
    padding:10px 20px;
    border-radius:var(--radius-full);
    font-weight:700; font-size:13px;
    color:var(--coral-dark);
    box-shadow:var(--shadow-md);
    white-space:nowrap;
    display:flex; align-items:center; gap:8px;
    animation:badgeFloat 5s ease-in-out infinite;
}

.about-text { padding:24px 0; }
.about-text .section-eyebrow { margin-bottom:12px; }

.section-lead {
    font-size:17px;
    font-weight:500;
    color:var(--gray-700, #374151);
    line-height:1.7;
    margin-bottom:16px;
}

.about-pillars {
    display:flex; flex-direction:column;
    gap:16px; margin:28px 0 32px;
}
.pillar {
    display:flex; align-items:flex-start; gap:16px;
    padding:16px;
    background:var(--gray-50);
    border-radius:var(--radius-md);
    border-left:3px solid var(--coral);
    transition:border-color var(--transition), background var(--transition);
}
.pillar:nth-child(2) { border-color:var(--violet); }
.pillar:nth-child(3) { border-color:var(--gold); }
.pillar:hover { background:var(--white); box-shadow:var(--shadow-sm); }
.pillar i { font-size:20px; color:var(--coral); margin-top:2px; flex-shrink:0; }
.pillar:nth-child(2) i { color:var(--violet); }
.pillar:nth-child(3) i { color:var(--gold-dark); }
.pillar strong { display:block; font-weight:700; font-size:15px; color:var(--gray-900); margin-bottom:4px; }
.pillar span { font-size:14px; color:var(--gray-600); }

/* ================================================================
   SERVICES SECTION
   ================================================================ */
.sponx-services { background:var(--gray-50); }

.services-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
}
.service-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--gray-100);
    transition:transform var(--transition), box-shadow var(--transition);
    animation-delay: var(--delay, 0ms);
}
.service-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}

.service-icon-wrap {
    width:56px; height:56px;
    border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    font-size:22px;
}
.service-icon-coral  { background:var(--coral-light); color:var(--coral); }
.service-icon-violet { background:var(--violet-light); color:var(--violet); }
.service-icon-gold   { background:var(--gold-light);   color:var(--gold-dark); }
.service-icon-teal   { background:var(--teal-light);   color:var(--teal); }

.service-card h3 {
    font-family:var(--font-head);
    font-size:18px; font-weight:700;
    color:var(--gray-900); margin-bottom:10px;
}
.service-card p { font-size:14px; color:var(--gray-600); line-height:1.7; margin-bottom:20px; }
.service-link {
    display:inline-flex; align-items:center; gap:6px;
    font-size:14px; font-weight:600;
    color:var(--coral);
    transition:gap var(--transition), color var(--transition);
}
.service-link:hover { gap:10px; color:var(--violet); }

/* ================================================================
   STATS BAND
   ================================================================ */
.sponx-stats-band {
    background: var(--grad-stats-bg);
    padding: 72px 0;
}
.stats-band-inner {
    max-width:1280px; margin:0 auto; padding:0 40px;
}
.stats-band-grid {
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:40px; text-align:center;
}
.stats-band-item {
    animation-delay: var(--delay, 0ms);
}
.stats-number {
    display:block;
    font-family:var(--font-head);
    font-size:clamp(40px,5vw,64px);
    font-weight:900;
    background:var(--grad-warm);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1;
}
.stats-plus { font-size:28px; font-weight:900; color:var(--gold); }
.stats-label {
    display:block; margin-top:8px;
    font-size:14px; font-weight:500;
    color:rgba(255,255,255,.7);
    text-transform:uppercase; letter-spacing:.05em;
}

/* ================================================================
   OUR WORK / PORTFOLIO
   ================================================================ */
.sponx-work { background:var(--white); }

.work-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:auto auto;
    gap:24px;
}
.work-card-large { grid-row:1/3; }

.work-card {
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:transform var(--transition), box-shadow var(--transition);
    background:var(--white);
    animation-delay: var(--delay, 0ms);
}
.work-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }

.work-card-img {
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
}
.work-card-large .work-card-img { aspect-ratio:4/3; }

.work-card-img img {
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
}
.work-card:hover .work-card-img img { transform:scale(1.06); }

.work-card-overlay {
    position:absolute;
    top:16px; left:16px;
    display:flex; gap:8px; flex-wrap:wrap;
}
.work-tag {
    padding:4px 12px;
    background:rgba(255,255,255,.95);
    border-radius:var(--radius-full);
    font-size:12px; font-weight:700;
    color:var(--violet);
    box-shadow:var(--shadow-sm);
}

.work-card-body { padding:24px; }
.work-card-body h3 {
    font-family:var(--font-head); font-size:17px; font-weight:700;
    color:var(--gray-900); margin-bottom:8px;
}
.work-card-body p { font-size:14px; color:var(--gray-600); margin-bottom:16px; }

.work-results {
    display:flex; gap:20px;
}
.work-results span {
    font-size:13px; color:var(--gray-400);
}
.work-results strong { color:var(--coral); font-weight:800; }

.work-cta { text-align:center; margin-top:56px; }

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.sponx-testimonials { background:var(--gray-50); }

.testimonials-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.testimonial-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--gray-100);
    position:relative;
    transition:transform var(--transition), box-shadow var(--transition);
    animation-delay: var(--delay, 0ms);
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }

.tcard-stars { font-size:18px; color:var(--gold); margin-bottom:16px; letter-spacing:2px; }

.tcard-quote {
    font-size:15px; color:var(--gray-700,#374151);
    line-height:1.75; margin-bottom:24px;
    font-style:italic;
}
.tcard-quote::before { content:'"'; font-size:40px; color:var(--coral-light); font-family:var(--font-accent); line-height:0; vertical-align:-16px; margin-right:4px; }

.tcard-author { display:flex; align-items:center; gap:12px; }
.tcard-avatar {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; color:var(--white);
    flex-shrink:0;
}
.ta-1 { background:var(--grad-primary); }
.ta-2 { background:var(--grad-warm); }
.ta-3 { background:var(--grad-cool); }

.tcard-author strong { display:block; font-size:14px; font-weight:700; color:var(--gray-900); }
.tcard-author span { font-size:12px; color:var(--gray-400); }

/* ================================================================
   CTA BAND
   ================================================================ */
.sponx-cta-band {
    position:relative;
    background:var(--grad-cta-bg);
    padding:100px 40px;
    overflow:hidden;
    text-align:center;
}
.cta-band-shapes { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cta-shape {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.05);
}
.cta-shape-1 { width:500px; height:500px; top:-200px; right:-100px; }
.cta-shape-2 { width:300px; height:300px; bottom:-100px; left:-50px; }

.cta-band-content { position:relative; z-index:2; max-width:700px; margin:0 auto; }
.cta-band-content h2 {
    font-family:var(--font-head); font-size:clamp(28px,4vw,44px);
    font-weight:900; color:var(--white); margin-bottom:16px; line-height:1.2;
}
.cta-band-content h2 span {
    font-style:italic; font-family:var(--font-accent);
    opacity:.9;
}
.cta-band-content p { font-size:17px; color:rgba(255,255,255,.8); margin-bottom:40px; }
.cta-band-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 36px;
    background:var(--white);
    color:var(--violet);
    font-family:var(--font-head); font-weight:800; font-size:16px;
    border-radius:var(--radius-full);
    box-shadow:0 8px 32px rgba(0,0,0,.2);
    transition:transform var(--transition), box-shadow var(--transition);
}
.cta-band-btn:hover {
    transform:translateY(-3px) scale(1.03);
    box-shadow:0 16px 48px rgba(0,0,0,.3);
}

/* ================================================================
   FOOTER
   ================================================================ */
.sponx-footer {
    background:var(--gray-900);
    color:rgba(255,255,255,.8);
}
.footer-inner { max-width:1280px; margin:0 auto; padding:72px 40px 32px; }
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:48px;
    margin-bottom:48px;
}
.footer-brand .sponx-logo-light .logo-name { -webkit-text-fill-color:var(--white); background:none; font-weight:800; }
.footer-brand .sponx-logo-light .logo-tagline { color:rgba(255,255,255,.4); }
.footer-brand .logo-mark-light { box-shadow:none; }

.footer-desc {
    font-size:14px; color:rgba(255,255,255,.55);
    line-height:1.8; margin:16px 0 24px;
}
.footer-social { display:flex; gap:10px; flex-wrap:wrap; }
.social-link {
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:rgba(255,255,255,.7);
    transition:background var(--transition), color var(--transition), transform var(--transition);
}
.social-link:hover { background:var(--coral); color:var(--white); transform:translateY(-3px); border-color:var(--coral); }

.footer-col h4 {
    font-family:var(--font-head); font-weight:700; font-size:15px;
    color:var(--white); margin-bottom:20px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col li a, .footer-col li {
    font-size:14px; color:rgba(255,255,255,.55);
    transition:color var(--transition);
    display:flex; align-items:center; gap:8px;
}
.footer-col li a:hover { color:var(--coral); }

.footer-contact-list li i { color:var(--coral); width:16px; }
.footer-contact-list a { color:rgba(255,255,255,.55); }
.footer-contact-list a:hover { color:var(--coral); }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:24px;
    text-align:center;
    font-size:13px; color:rgba(255,255,255,.35);
}
.footer-heart { color:var(--coral); font-size:16px; }

/* ================================================================
   CONTACT MODAL
   ================================================================ */
.sponx-modal-overlay {
    position:fixed; inset:0; z-index:9000;
    background:rgba(15,10,30,.65);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease);
}
.sponx-modal-overlay.visible {
    opacity:1; pointer-events:all;
}
.sponx-modal {
    background:var(--white);
    border-radius:var(--radius-xl);
    padding:40px;
    width:100%; max-width:500px;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 32px 80px rgba(0,0,0,.25);
    position:relative;
    transform:scale(.92) translateY(16px);
    transition:transform .35s var(--ease-spring);
    scrollbar-width:thin;
}
.sponx-modal-overlay.visible .sponx-modal {
    transform:scale(1) translateY(0);
}

.modal-close {
    position:absolute; top:16px; right:16px;
    width:36px; height:36px;
    border-radius:50%;
    background:var(--gray-100);
    color:var(--gray-600);
    display:flex; align-items:center; justify-content:center;
    font-size:16px;
    transition:background var(--transition), color var(--transition), transform var(--transition);
}
.modal-close:hover { background:var(--coral-light); color:var(--coral); transform:rotate(90deg); }

.modal-header { text-align:center; margin-bottom:32px; }
.modal-icon-ring {
    width:64px; height:64px;
    border-radius:50%;
    background:var(--grad-primary);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:var(--white);
    margin:0 auto 16px;
    box-shadow:var(--shadow-coral);
    animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
    0%,100%{box-shadow:var(--shadow-coral), 0 0 0 0 rgba(255,107,107,.4);}
    50%{box-shadow:var(--shadow-coral), 0 0 0 12px rgba(255,107,107,.0);}
}
.modal-header h2 { font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--gray-900); margin-bottom:8px; }
.modal-header p { font-size:14px; color:var(--gray-600); }

/* Form */
.sponx-contact-form { display:flex; flex-direction:column; gap:20px; }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
    font-size:13px; font-weight:600; color:var(--gray-700,#374151);
    display:flex; align-items:center; gap:6px;
}
.form-group label i { color:var(--violet); font-size:12px; }
.req { color:var(--coral); }
.opt { color:var(--gray-400); font-weight:400; }

.form-group input,
.form-group textarea {
    padding:12px 16px;
    border:2px solid var(--gray-200);
    border-radius:var(--radius-md);
    font-family:var(--font-body); font-size:15px;
    color:var(--gray-900);
    background:var(--white);
    transition:border-color var(--transition), box-shadow var(--transition);
    resize:vertical;
    outline:none;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color:var(--violet);
    box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
.form-group input.input-error,
.form-group textarea.input-error {
    border-color:var(--coral);
    box-shadow:0 0 0 4px rgba(255,107,107,.12);
}
.field-error { font-size:12px; color:var(--coral); font-weight:500; min-height:16px; }

.form-submit-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:16px;
    background:var(--grad-primary);
    color:var(--white);
    font-family:var(--font-head); font-weight:700; font-size:16px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-coral);
    transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.form-submit-btn:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,107,107,.45); }
.form-submit-btn:disabled { opacity:.65; pointer-events:none; }

.form-privacy {
    text-align:center; font-size:12px; color:var(--gray-400);
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.form-privacy i { color:var(--green); }

/* ================================================================
   SUCCESS OVERLAY
   ================================================================ */
.sponx-success-overlay {
    position:fixed; inset:0; z-index:9100;
    background:linear-gradient(135deg, #FFFBF5 0%, #F5F3FF 50%, #FFF0F5 100%);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity .4s var(--ease);
}
.sponx-success-overlay.visible { opacity:1; pointer-events:all; }

.success-content {
    text-align:center;
    max-width:480px;
    transform:scale(.8);
    transition:transform .5s var(--ease-spring);
}
.sponx-success-overlay.visible .success-content { transform:scale(1); }

/* Animated SVG checkmark */
.success-circle {
    width:120px; height:120px;
    margin:0 auto 28px;
    position:relative;
}
.success-svg { width:100%; height:100%; }

.success-ring {
    fill:none;
    stroke:url(#successGrad);
    stroke-width:4;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition:stroke-dashoffset 0.8s cubic-bezier(.22,1,.36,1) .2s;
}
.sponx-success-overlay.visible .success-ring { stroke-dashoffset:0; }

.success-check {
    fill:none;
    stroke:var(--coral);
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:80;
    stroke-dashoffset:80;
    transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1) .9s;
}
.sponx-success-overlay.visible .success-check { stroke-dashoffset:0; }

.success-title {
    font-family:var(--font-head); font-size:32px; font-weight:900;
    color:var(--gray-900); margin-bottom:12px;
    opacity:0; transform:translateY(20px);
    transition:opacity .5s ease 1.1s, transform .5s var(--ease-spring) 1.1s;
}
.sponx-success-overlay.visible .success-title { opacity:1; transform:translateY(0); }

.success-msg {
    font-size:16px; color:var(--gray-600); line-height:1.75;
    margin-bottom:36px;
    opacity:0; transform:translateY(16px);
    transition:opacity .5s ease 1.25s, transform .5s var(--ease-spring) 1.25s;
}
.sponx-success-overlay.visible .success-msg { opacity:1; transform:translateY(0); }
.success-msg strong { color:var(--violet); }

/* Confetti container */
.success-confetti {
    position:fixed; inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:9200;
}
.confetti-piece {
    position:absolute;
    width:10px; height:10px;
    border-radius:2px;
    animation:confettiFall linear forwards;
    top:-20px;
}
@keyframes confettiFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
}

.success-close-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px;
    background:var(--grad-primary);
    color:var(--white);
    font-family:var(--font-head); font-weight:700; font-size:15px;
    border-radius:var(--radius-full);
    box-shadow:var(--shadow-coral);
    transition:transform var(--transition), box-shadow var(--transition);
    opacity:0; transform:translateY(16px);
    transition:opacity .5s ease 1.5s, transform .5s var(--ease-spring) 1.5s, box-shadow .3s ease;
}
.sponx-success-overlay.visible .success-close-btn { opacity:1; transform:translateY(0); }
.success-close-btn:hover { box-shadow:0 12px 40px rgba(255,107,107,.45); }

/* ================================================================
   BLOG HERO OVERRIDE
   ================================================================ */
.sponx-blog-hero {
    position:relative;
    background:var(--grad-hero-bg);
    padding:80px 40px 60px;
    text-align:center;
    overflow:hidden;
    margin-top:72px;
}
.blog-hero-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.blog-hero-shape {
    position:absolute; border-radius:50%;
    filter:blur(50px);
}
.bhs-1 { width:300px; height:300px; background:rgba(255,107,107,.12); top:-100px; right:-50px; }
.bhs-2 { width:250px; height:250px; background:rgba(124,58,237,.10); bottom:-80px; left:-50px; }
.blog-hero-content { position:relative; z-index:2; max-width:600px; margin:0 auto; }
.blog-hero-title {
    font-family:var(--font-head); font-size:clamp(32px,5vw,52px);
    font-weight:900; color:var(--gray-900); margin-bottom:16px;
}
.blog-hero-sub { font-size:17px; color:var(--gray-600); line-height:1.7; }

/* ================================================================
   ODOO WEBSITE.LAYOUT INTEGRATION
   Our header sits BEFORE #wrapwrap (fixed, z-index 1000).
   Odoo's own <header id="top"> is inside #wrapwrap — hide it.
   Give #wrapwrap padding-top to clear our fixed nav.
   ================================================================ */

/* Our Sponxmedia header is fixed and lives OUTSIDE #wrapwrap.
   Push the wrapwrap down so content clears it. */
#wrapwrap {
    padding-top: 72px !important;
    font-family: var(--font-body) !important;
    background: var(--white);
    margin-top: 0 !important;
}

/* Hide Odoo's own header (id="top") that lives inside #wrapwrap */
#wrapwrap > header#top,
#wrapwrap > header[data-anchor="true"],
#top {
    display: none !important;
}

/* Hide Odoo footer — ours is rendered outside #wrapwrap */
footer#bottom {
    display: none !important;
}

/* Blog listing: no extra top gap */
.website_blog #o_wblog_blog_top { margin-top: 0 !important; }
.website_blog section#o_wblog_post_top { padding-top: 0 !important; }
.website_blog .blog_header { margin-top: 0 !important; }

/* ================================================================
   BLOG — THEMED STYLES
   Styles for both blog listing and individual blog post pages
   ================================================================ */

/* Blog listing hero (our injected section) */
.sponx-blog-hero {
    position: relative;
    background: var(--grad-hero-bg);
    padding: 72px 40px 56px;
    text-align: center;
    overflow: hidden;
}
.blog-hero-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.blog-hero-shape {
    position: absolute; border-radius: 50%;
    filter: blur(50px);
}
.bhs-1 { width:320px; height:320px; background:rgba(255,107,107,.14); top:-100px; right:-60px; animation:shapeFloat 8s ease-in-out infinite; }
.bhs-2 { width:240px; height:240px; background:rgba(124,58,237,.10); bottom:-80px; left:-40px; animation:shapeFloat 10s ease-in-out infinite reverse; }
.bhs-3 { width:160px; height:160px; background:rgba(245,158,11,.12); top:30%; left:15%; animation:shapeFloat 7s ease-in-out infinite; animation-delay:-3s; }
.blog-hero-content { position:relative; z-index:2; max-width:640px; margin:0 auto; }
.blog-hero-title {
    font-family: var(--font-head);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 14px;
    line-height: 1.15;
}
.blog-hero-sub { font-size:17px; color:var(--gray-600); line-height:1.7; }

/* Blog listing container */
.website_blog #o_wblog_blog_top { margin-top: 0; }
.website_blog #o_wblog_index_content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 40px 80px;
}

/* Blog post cards (Odoo renders these) — apply our card style */
.website_blog .o_wblog_post_short_cover_container,
.website_blog .o_record_cover_container {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}
.website_blog article.o_wblog_post_card {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--gray-100) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    overflow: hidden;
    background: var(--white);
}
.website_blog article.o_wblog_post_card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg) !important;
}
.website_blog .o_wblog_post_list_item {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--gray-100) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    overflow: hidden;
}
.website_blog .o_wblog_post_list_item:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Blog post title/content typography */
.website_blog h1.o_wblog_post_name,
.website_blog .blog_header h1 {
    font-family: var(--font-head) !important;
    font-weight: 800 !important;
    color: var(--gray-900) !important;
}
.website_blog .o_wblog_post_content_short,
.website_blog #o_wblog_post_content p {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--gray-700, #374151) !important;
}

/* Blog post top padding — clear fixed nav */
.sponx-blog-post-top { padding-top: 40px !important; }

/* Blog "Read more" / tag links */
.website_blog .o_wblog_read_more,
.website_blog .badge {
    background: var(--violet-light) !important;
    color: var(--violet) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: background var(--transition), color var(--transition) !important;
}
.website_blog .o_wblog_read_more:hover,
.website_blog .badge:hover {
    background: var(--violet) !important;
    color: var(--white) !important;
}

/* Blog sidebar */
.website_blog .o_wblog_sidebar {
    border-left: 1px solid var(--gray-100);
    padding-left: 32px;
}
.website_blog .o_wblog_sidebar .card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--gray-100) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Blog filter nav pills */
.website_blog nav.o_blogs_nav a,
.website_blog .o_wblog_tag_link {
    border-radius: var(--radius-full) !important;
    font-weight: 500 !important;
    transition: background var(--transition), color var(--transition) !important;
}
.website_blog nav.o_blogs_nav a:hover,
.website_blog .o_wblog_tag_link:hover {
    background: var(--coral-light) !important;
    color: var(--coral-dark) !important;
}
.website_blog nav.o_blogs_nav a.active,
.website_blog .o_wblog_tag_link.active {
    background: var(--grad-primary) !important;
    color: var(--white) !important;
}

/* "Sign in to comment" link */
.website_blog a[href*="/web/login"] {
    color: var(--violet) !important;
    font-weight: 600 !important;
}
.website_blog a[href*="/web/login"]:hover { color: var(--coral) !important; }

/* ================================================================
   LOGIN / SIGN IN PAGE  (/web/login)
   Full-page branded design — override Odoo's default grey login
   ================================================================ */
body.o_login_page,
.o_login_page #wrapwrap {
    background: var(--grad-hero-bg) !important;
    min-height: 100vh;
}

.o_login_page .o_main_nav,
.o_login_page header { display: none !important; }

/* Centre the login card */
.o_login_page #wrapwrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px !important;
}
.o_login_page .container,
.o_login_page .o_form_view_container {
    max-width: 460px !important;
    width: 100% !important;
}

/* Login card */
.o_login_page .card,
.o_login_page .oe_login_form {
    background: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 24px 80px rgba(124,58,237,.15), 0 8px 24px rgba(0,0,0,.08) !important;
    padding: 40px 40px 36px !important;
}

/* Login card branding header */
.o_login_page .card::before,
.o_login_page .oe_login_form::before {
    content: '';
    display: block;
    width: 56px; height: 56px;
    background: var(--grad-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-coral);
    margin: 0 auto 16px;
    background-image: var(--grad-primary);
}

/* Login title */
.o_login_page h3,
.o_login_page .card-title,
.o_login_page h4 {
    font-family: var(--font-head) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    color: var(--gray-900) !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* Form labels */
.o_login_page label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--gray-700, #374151) !important;
    margin-bottom: 6px !important;
}

/* Form inputs */
.o_login_page .form-control,
.o_login_page input[type="text"],
.o_login_page input[type="email"],
.o_login_page input[type="password"] {
    border: 2px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    padding: 11px 16px !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
    background: var(--white) !important;
}
.o_login_page .form-control:focus,
.o_login_page input[type="text"]:focus,
.o_login_page input[type="email"]:focus,
.o_login_page input[type="password"]:focus {
    border-color: var(--violet) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,.12) !important;
    outline: none !important;
}

/* Sign In submit button */
.o_login_page .btn-primary,
.o_login_page button[type="submit"],
.o_login_page input[type="submit"] {
    background: var(--grad-primary) !important;
    border: none !important;
    border-radius: var(--radius-full) !important;
    font-family: var(--font-head) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 28px !important;
    width: 100% !important;
    box-shadow: var(--shadow-coral) !important;
    transition: transform var(--transition), box-shadow var(--transition) !important;
    color: var(--white) !important;
}
.o_login_page .btn-primary:hover,
.o_login_page button[type="submit"]:hover,
.o_login_page input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 40px rgba(255,107,107,.45) !important;
}

/* "Forgot password" / other links */
.o_login_page a:not(.btn) {
    color: var(--violet) !important;
    font-weight: 500 !important;
}
.o_login_page a:not(.btn):hover { color: var(--coral) !important; }

/* Login page back-to-home logo */
.o_login_page .o_logo_login {
    display: block;
    text-align: center;
    margin-bottom: 28px;
    text-decoration: none;
}

/* Floating shape decoration on login page */
.o_login_page::before {
    content: '';
    position: fixed;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: rgba(255,107,107,.10);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.o_login_page::after {
    content: '';
    position: fixed;
    bottom: -80px; left: -80px;
    width: 300px; height: 300px;
    background: rgba(124,58,237,.08);
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
   SCROLL REVEAL ANIMATIONS
   ================================================================ */
.reveal-up, .reveal-left, .reveal-right {
    opacity:0;
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--delay, 0ms);
}
.reveal-up    { transform:translateY(40px); }
.reveal-left  { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
    opacity:1; transform:none;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .sponx-hero { grid-template-columns:1fr; padding:60px 40px 80px; text-align:center; }
    .hero-visual { display:none; }
    .hero-trust { justify-content:center; }
    .hero-badges .badge-2 { right:2%; }
    .about-grid { grid-template-columns:1fr; gap:48px; }
    .about-img-grid { max-width:500px; margin:0 auto; }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .stats-band-grid { grid-template-columns:repeat(2,1fr); gap:32px; }
    .work-grid { grid-template-columns:1fr; }
    .work-card-large { grid-row:auto; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width: 768px) {
    .sponx-menu { display:none; }
    .sponx-header-right-mobile { display:flex; }
    .sponx-hamburger { display:flex; }
    .sponx-hero { padding:40px 24px 60px; min-height:auto; }
    .hero-badges { display:none; }
    .services-grid, .testimonials-grid { grid-template-columns:1fr; }
    .stats-band-grid { grid-template-columns:repeat(2,1fr); }
    .sponx-cta-band { padding:60px 24px; }
    .footer-grid { grid-template-columns:1fr; }
    .section-container { padding:0 24px; }
    .sponx-modal { padding:28px 20px; border-radius:var(--radius-lg); }
    .sponx-blog-hero { padding:60px 24px 40px; }
}

@media (max-width: 480px) {
    .hero-actions { flex-direction:column; align-items:stretch; }
    .hero-trust { flex-direction:column; align-items:center; }
    .trust-divider { width:40px; height:1px; }
    .stats-band-grid { grid-template-columns:1fr 1fr; }
}