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

:root {
    --emerald: #50C878;
    --emerald-dark: #013220;
    --emerald-deep: #0a5a36;
    --emerald-soft: rgba(80, 200, 120, 0.14);
    --ink: #17153f;
    --text-dark: #111;
    --text-light: #666;
    --border: #eaeaea;
    --white: #fff;
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(80, 200, 120, 0.25);
    
    /* Universal Base Glass Shadow */
    --glass-shadow: 0 18px 26px rgba(0, 0, 0, 0.42), 0 44px 70px rgba(0, 0, 0, 0.34);
    
    /* Punchy Drop Shadows */
    --punchy-shadow-soft: 0 18px 22px rgba(0, 0, 0, 0.46), 0 34px 52px rgba(0, 0, 0, 0.34);
    --punchy-shadow-heavy: 0 26px 32px rgba(0, 0, 0, 0.62), 0 58px 82px rgba(0, 0, 0, 0.48);
    --punchy-shadow-glow: 0 24px 30px rgba(0, 0, 0, 0.58), 0 54px 74px rgba(0, 0, 0, 0.44);
    
    --glass-blur: blur(16px);
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: var(--text-dark); overflow-x: hidden; background: #fff; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: 'Poppins', sans-serif; }

@media(pointer: coarse) {
    * { cursor: auto !important; }
    .cursor-dot, .cursor-ring, .cursor-glow { display: none !important; }
}

/* =========================================================
   CURSOR SYSTEM
   ========================================================= */
.cursor-dot { position: fixed; width: 7px; height: 7px; background: var(--emerald); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 20000; transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease; mix-blend-mode: multiply; }
.cursor-ring { position: fixed; width: 34px; height: 34px; border: 1.5px solid rgba(80, 200, 120, 0.65); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 19999; transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, border-color 0.28s ease; }
.cursor-glow { position: fixed; width: 125px; height: 125px; border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(80, 200, 120, 0.18), rgba(80, 200, 120, 0.08) 42%, transparent 70%); filter: blur(4px); opacity: 0.55; transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease; }
.cursor-interactive .cursor-dot { width: 0; height: 0; opacity: 0; }
.cursor-interactive .cursor-ring { width: 58px; height: 58px; background: rgba(80, 200, 120, 0.16); border-color: rgba(80, 200, 120, 0.28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cursor-section-active .cursor-ring { width: 72px; height: 72px; background: rgba(80, 200, 120, 0.10); border-color: rgba(80, 200, 120, 0.32); }
.cursor-section-active .cursor-glow { width: 190px; height: 190px; opacity: 0.9; }

/* =========================================================
   HEADER
   ========================================================= */
header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; z-index: 1000; background: rgba(255, 255, 255, 1); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: none; border-radius: 0; box-shadow: none; }
header.scrolled { top: 15px; left: 2%; width: 96%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 15px 40px; border: 1px solid var(--glass-border); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32); border-radius: 16px; }

.logo { font-size: 26px; font-weight: 300; letter-spacing: 2px; color: var(--text-dark); text-decoration: none; display: flex; align-items: center; white-space: nowrap; }
.logo img { height: 35px; width: auto; margin-right: 12px; display: inline-block; vertical-align: middle; }
.mobile-menu-toggle { display: none; }
nav ul { display: flex; list-style: none; gap: 30px; }
.nav-item { position: relative; display: flex; align-items: center; }
nav a { text-decoration: none; color: var(--text-dark); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; transition: color 0.3s ease; display: flex; align-items: center; padding: 10px 0; }
nav a:hover { color: var(--emerald); }

header nav ul li a { position: relative; padding: 10px 0; }

header nav ul li a::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 6px;
    height: 6px;
    background-color: var(--emerald);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

header nav ul li a.active::before { opacity: 1 !important; transform: translateY(-50%) scale(1) !important; }
header nav ul li a.dot-enter::before { animation: dotFadeInAbove 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
header nav ul li a.dot-leave::before { animation: dotFadeOutBelow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes dotFadeInAbove {
    0% { opacity: 0; transform: translateY(-180%) scale(0.4); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes dotFadeOutBelow {
    0% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(80%) scale(0.4); }
}

.services-banner { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); width: 450px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); padding: 30px; flex-direction: row; gap: 40px; border: 1px solid rgba(80, 200, 120, 0.12); z-index: 1000; }
.nav-item:hover .services-banner { display: flex !important; }
.service-column { flex: 1; }
.service-column h3 { font-size: 11px; font-weight: 600; color: var(--emerald); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; border-bottom: 1px solid #eaeaea; padding-bottom: 5px; }
.service-column a { display: block; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0.5px; padding: 6px 0; transition: transform 0.2s ease, color 0.2s ease; }
.service-column a:hover { color: var(--emerald); transform: translateX(5px); }

/* =========================================================
   GLOBAL STYLES & GLASSMORPHISM
   ========================================================= */
.media-hover { transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s ease, border-color 0.42s ease, filter 0.42s ease; transform-style: preserve-3d; }
.media-hover:hover { transform: translateY(-10px) scale(1.015); border-color: rgba(80, 200, 120, 0.42); filter: saturate(1.08); z-index: 10;}
.glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 18px; }
.section-padding { padding: 90px 10%; }
.section-title { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.section-title h2 { font-size: 2.8rem; line-height: 1.2; font-weight: 700; color: var(--ink); margin-bottom: 15px; }
.section-title h2 span { color: var(--emerald); font-style: italic; font-weight: 900; }
.section-title p { color: var(--text-light); font-size: 1rem; line-height: 1.8; }

.magnetic-btn { position: relative; isolation: isolate; overflow: hidden; padding: 16px 35px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(80, 200, 120, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: none; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: none;}
.magnetic-btn:hover { background: var(--emerald); transform: translateY(-4px); box-shadow: var(--punchy-shadow-glow); }
.magnetic-btn.outline { 
    background: linear-gradient(to right, #8ec63f, #00a99d) !important; 
    border: none !important; 
    color: #fff !important; 
    box-shadow: 0 8px 20px rgba(0, 169, 157, 0.3);
}
.magnetic-btn.outline:hover { 
    background: linear-gradient(to right, #9ed64f, #00bfae) !important; 
    color: #fff !important; 
    filter: brightness(1.1);
}

/* Scroll Reveal Classes */
.reveal { opacity: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.fade-bottom { transform: translateY(50px); }
.reveal.fade-left { transform: translateX(-50px); }
.reveal.fade-right { transform: translateX(50px); }
.reveal.active { opacity: 1; transform: translate(0, 0); }

/* =========================================================
   HERO SLIDER
   ========================================================= */
#hero-slider { position: relative; height: 85vh; margin-top: 85px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; transition: background 0.8s ease-in-out; background-color: #2c2c2c; background-size: cover; background-position: top center; padding: 0 20px; overflow: hidden; }
#hero-slider::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--hero-x, 50%) var(--hero-y, 50%), rgba(80, 200, 120, 0.18), transparent 35%); pointer-events: none; z-index: 1; }
.hero-content { max-width: 900px; z-index: 2; animation: fadeIn 1s ease-in-out; }
.hero-subtext { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 25px; display: block; }
.hero-title { font-family: 'Playfair Display', serif; font-size: 4.5rem; line-height: 1.1; margin-bottom: 40px; font-weight: 400; }
.slider-controls { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 40px; z-index: 3; pointer-events: none; }
.slider-arrow { color: #fff; font-size: 24px; pointer-events: auto; transition: transform 0.25s, color 0.25s; }
.slider-arrow:hover { transform: scale(1.2); color: var(--emerald); }
.slider-dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; z-index: 4; }
.dot { width: 12px; height: 12px; border-radius: 50%; transition: all 0.3s ease; background: rgba(80, 200, 120, 0.25); backdrop-filter: blur(5px); border: 1px solid rgba(80, 200, 120, 0.5); }
.dot:hover { background: rgba(80, 200, 120, 0.6); border: 1px solid rgba(80, 200, 120, 0.9); transform: scale(1.2); }
.dot.active { background: rgba(80, 200, 120, 0.9); border: 1px solid rgba(80, 200, 120, 1); transform: scale(1.3); box-shadow: 0 0 8px rgba(80, 200, 120, 0.6); }

/* =========================================================
   MODIFIED: TOP PROPOSAL (OR) STRIP
   ========================================================= */
.top-proposal-strip { padding: 30px 10% 135px; background: #fff; display: flex; justify-content: center; overflow: visible; }

.dual-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-width: 400px; /* Reduced Size */
    height: 54px; /* Reduced Size */
    position: relative;
    isolation: isolate;
    border-radius: 999px !important;
    overflow: hidden;
    background: linear-gradient(90deg, var(--emerald) 50%, var(--emerald-dark) 50%); /* Emerald Theme */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin: 0 auto;
    border: none;
}
.dual-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.dual-action button, .dual-action a {
    width: 100%;
    height: 100%;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 20px;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px; /* Reduced Font Size */
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    transition: text-shadow 0.3s ease;
    cursor: pointer;
}
/* Individual Button Hover Glow Effect */
.dual-action button::before, .dual-action a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.dual-action button:hover::before, .dual-action a:hover::before {
    opacity: 1;
}
.dual-action button:hover, .dual-action a:hover {
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.dual-action button i {
    transition: transform 0.35s ease;
}
.dual-action button:hover i {
    transform: translateX(4px);
}
.dual-action .or {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; /* Reduced Size */
    height: 40px; /* Reduced Size */
    border-radius: 50%;
    background: #ffffff;
    color: var(--emerald-dark); /* Theme integration */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    z-index: 3;
    font-size: 12px; /* Reduced Font Size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}
.dual-action:hover .or {
    transform: translate(-50%, -50%) scale(1.05); /* Softer Scale on Hover */
}

/* =========================================================
   JOURNEY SECTION
   ========================================================= */
.journey-section { position: relative; padding: 100px 10%; background: #fff; overflow: hidden; }
.rotating-vector { position: absolute; left: -150px; top: 10%; width: 500px; height: 500px; animation: spinVector 40s linear infinite; pointer-events: none; z-index: 0; opacity: 0.6; }
@keyframes spinVector { 100% { transform: rotate(360deg); } }
.journey-wrap { position: relative; z-index: 2; max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.journey-copy h4 { font-size: 1.1rem; color: var(--emerald-deep); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.journey-copy h4 strong { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-style: italic; color: var(--emerald); }
.journey-copy h2 { font-size: 2.5rem; line-height: 1.25; font-weight: 700; color: var(--ink); margin-bottom: 25px; }
.journey-text-container { position: relative; border-left: 3px solid var(--emerald); padding-left: 25px; margin-bottom: 20px; }
.journey-text-container p { line-height: 1.8; color: var(--text-light); margin-bottom: 15px; font-size: 0.95rem; }
.hidden-journey-text { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; }
.hidden-journey-text.show { max-height: 600px; opacity: 1; }
.read-more-toggle { width: 45px; height: 45px; border-radius: 50%; background: var(--emerald-soft); color: var(--emerald); border: 1px solid rgba(80, 200, 120, 0.4); display: flex; align-items: center; justify-content: center; cursor: none; transition: 0.3s ease; font-size: 14px; margin-left: 25px; }
.read-more-toggle:hover { background: var(--emerald); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(80, 200, 120, 0.2); }
.read-more-toggle i { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.read-more-toggle.expanded i { transform: rotate(180deg); }

.journey-media { position: relative; }
.half-circle-vector { position: absolute; top: -30px; left: -30px; width: 140px; height: 70px; border-top-left-radius: 140px; border-top-right-radius: 140px; border: 18px solid var(--emerald-soft); border-bottom: 0; z-index: 1; }
.half-circle-vector::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 32px; border-top-left-radius: 64px; border-top-right-radius: 64px; border: 12px solid var(--emerald); border-bottom: 0; opacity: 0.2; }
.media-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: 1fr 1fr; gap: 20px; position: relative; z-index: 2; }
.media-grid .main-img { grid-row: 1 / 3; border-radius: 16px; overflow: hidden; position: relative; min-height: 480px; box-shadow: var(--punchy-shadow-soft); }
.media-grid .sub-img { border-radius: 16px; overflow: hidden; position: relative; height: 230px; box-shadow: var(--punchy-shadow-soft); }
.media-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.media-grid .img-wrapper { width: 100%; height: 100%; overflow: hidden; }
.media-grid > div:hover img { transform: scale(1.06); }
.pulse-dot { position: absolute; width: 14px; height: 14px; background: var(--emerald); border-radius: 50%; z-index: 5; box-shadow: 0 0 10px rgba(80, 200, 120, 0.8); }
.pulse-dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--emerald); animation: pulseRing 2s infinite; }
@keyframes pulseRing { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.expertise-hover-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; visibility: visible; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 20px 25px; border-radius: 12px; box-shadow: var(--punchy-shadow-heavy); width: 280px; text-align: center; color: var(--ink); font-weight: 600; font-size: 0.95rem; line-height: 1.6; border-left: 4px solid var(--emerald); z-index: 10; pointer-events: none; }

/* =========================================================
   QUICK CAPTURE / STATS
   ========================================================= */
.quick-capture-section { padding: 80px 10%; background: #f4f6f5; }
.quick-capture-grid { max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.quick-subheading { font-size: 2.2rem; color: var(--emerald-dark); margin-bottom: 10px; font-weight: 500; }
.stats-title { font-size: 3.5rem; line-height: 1.1; font-weight: 900; color: var(--emerald); font-style: italic; margin-bottom: 30px; }

.stat-row { display: flex; justify-content: space-between; gap: 20px; }
.stat-block { position: relative; padding-bottom: 15px; }
.stat-block h3 { color: #3f3d56; font-size: 2.2rem; margin-bottom: 5px; font-weight: 700; }
.stat-block p { color: #555; font-size: 0.9rem; font-weight: 500; }
.stat-underline { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--emerald); border-radius: 2px; }

.quick-form-container { background: transparent; padding: 0; border: none; box-shadow: none; }
.quick-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }

.quick-form input, .quick-form textarea, .fake-captcha { 
    background: #fff; 
    border: 1px solid #d1d1d1; 
    padding: 15px; 
    border-radius: 6px; 
    font-size: 0.95rem; 
    color: #333; 
    transition: border-color 0.3s; 
    width: 100%; 
    box-sizing: border-box; 
}
.quick-form input:focus, .quick-form textarea:focus { outline: none; border-color: var(--emerald); }

.phone-field { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.phone-field .country-code-select { flex: 0 0 122px; min-width: 112px; padding: 12px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.92); font-family: 'Poppins', sans-serif; font-size: 14px; outline: none; }
.phone-field input { flex: 1 1 auto; min-width: 0; }
.phone-field .country-code-select:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }
.quick-form .phone-field { min-height: 52px; }
.quick-form .phone-field .country-code-select,
.quick-form .phone-field input { min-height: 52px; }
.quick-form .phone-field .country-code-select { border-radius: 14px; }

.quick-form textarea { min-height: 52px; resize: none; grid-column: auto; }

.fake-captcha { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #666; font-size: 0.9rem; }
.fake-captcha .box { width: 22px; height: 22px; border: 2px solid #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; background: #fff;}
.fake-captcha.checked .box { background: var(--emerald); border-color: var(--emerald); color: #fff; }

.quick-submit { 
    background: var(--emerald) !important; 
    color: #fff; 
    border-radius: 6px !important; 
    padding: 15px 40px; 
    border: none; 
    font-weight: 600; 
    font-size: 1.1rem; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 4px 15px rgba(80, 200, 120, 0.4) !important; 
}

/* =========================================================
   PROVEN RESULTS (LOGOS)
   ========================================================= */
.logos-section { padding: 80px 10%; background: #fff; }
.logos-grid-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: center; max-width: 1300px; margin: auto; }
.logos-text h2 { font-size: 2.2rem; margin-bottom: 20px; color: var(--ink); }
.logos-text h2 span { color: var(--emerald); }
.logos-text p { color: var(--text-light); line-height: 1.8; margin-bottom: 30px; }
.logos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.logo-box { padding: 25px 20px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--emerald-soft); border: 1px solid rgba(80, 200, 120, 0.2); box-shadow: var(--punchy-shadow-soft); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.logo-box img { max-width: 110px; height: auto; object-fit: contain; filter: none; opacity: 1; transition: filter 0.3s ease, opacity 0.3s ease; }
.logo-box:hover { transform: translateY(-5px); box-shadow: var(--punchy-shadow-heavy); }

/* =========================================================
   REFERENCE RADIAL NODE DIAGRAM
   ========================================================= */
.needs-section { padding: 96px 8% 116px; background: linear-gradient(180deg, #ffffff 0%, #fbfffc 100%); position: relative; overflow: hidden; isolation: isolate; }
.needs-section::before { content: ''; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(90deg, transparent 0 8%, rgba(23,21,63,.04) 8.1%, transparent 8.28%), linear-gradient(0deg, transparent 0 11%, rgba(23,21,63,.035) 11.1%, transparent 11.25%); background-size: 360px 240px; pointer-events: none; z-index: 0; }
.needs-section .section-title { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto 28px; }
.needs-section .section-title h2 { font-size: 2.85rem; line-height: 1.12; font-weight: 700; color: var(--ink); }
.needs-section .section-title h2 span { display: block; font-size: 3.05rem; color: var(--emerald-dark); font-style: italic; font-weight: 900; letter-spacing: -1px; text-shadow: 0 14px 34px rgba(80,200,120,.12); }
.needs-section .section-title p { max-width: 1180px; margin: 16px auto 0; font-size: .94rem; line-height: 1.86; color: #2d2d38; }

.needs-stage { position: relative; z-index: 2; width: 1200px; height: 610px; margin: 18px auto 0; transform-style: preserve-3d; }
.needs-connector-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.need-line-base { fill: none; stroke: rgba(23,21,63,.15); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 8; }
.need-line-glow { fill: none; stroke: rgba(80,200,120,.00); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: blur(10px); transition: opacity .3s ease; }
.need-line-active { fill: none; stroke: var(--emerald); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 8; stroke-dashoffset: 24; opacity: 0; filter: drop-shadow(0 0 6px rgba(80,200,120,.8)); transition: opacity .24s ease; }

.needs-stage[data-active="1"] .need-line-active[data-line="1"], .needs-stage[data-active="2"] .need-line-active[data-line="2"], .needs-stage[data-active="3"] .need-line-active[data-line="3"], .needs-stage[data-active="4"] .need-line-active[data-line="4"], .needs-stage[data-active="5"] .need-line-active[data-line="5"], .needs-stage[data-active="6"] .need-line-active[data-line="6"] { opacity: 1; animation: dottedFlow 0.8s linear infinite; }
.needs-stage[data-active="1"] .need-line-glow[data-line="1"], .needs-stage[data-active="2"] .need-line-glow[data-line="2"], .needs-stage[data-active="3"] .need-line-glow[data-line="3"], .needs-stage[data-active="4"] .need-line-glow[data-line="4"], .needs-stage[data-active="5"] .need-line-glow[data-line="5"], .needs-stage[data-active="6"] .need-line-glow[data-line="6"] { opacity: .72; stroke: rgba(80,200,120,.35); }
@keyframes dottedFlow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.needs-hub-wrap { position: absolute; left: 600px; top: 305px; width: 220px; height: 190.5px; transform: translate(-50%, -50%); z-index: 7; transition: transform 0.4s cubic-bezier(.16,1,.3,1); cursor: none; }
.needs-hub-wrap:hover { transform: translate(-50%, -50%) scale(1.08); }
.needs-hub-wrap::before { content: ''; position: absolute; left: 50%; bottom: -20px; width: 72%; height: 28px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--emerald-dark) 0%, var(--emerald) 60%, transparent 100%); z-index: 0; pointer-events: none; }
.needs-hub-wrap:hover::before { bottom: -28px; width: 82%; height: 34px; background: radial-gradient(closest-side, var(--emerald-dark) 0%, var(--emerald) 60%, transparent 100%); }
.needs-hub { z-index: 2; width: 100%; height: 100%; background: rgba(80, 200, 120, 0.35); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); position: relative; display: flex; align-items: center; justify-content: center; }
.needs-hub-inner { position: absolute; inset: 2px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.needs-hub-inner img { width: 62px; height: auto; margin-bottom: 5px; filter: drop-shadow(0 8px 12px rgba(80,200,120,.2)); }
.needs-hub-content { text-align: center; display: flex; flex-direction: column; align-items: center; color: var(--emerald-dark); font-weight: 800; font-size: 13px; line-height: 1.1; }
.needs-hub-content span { color: var(--emerald); font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; font-weight: 700; }

.need-petal { position: absolute; z-index: 6; width: 100px; height: 86.6px; transform: translate(-50%, -50%); transition: transform 0.3s cubic-bezier(.16,1,.3,1); border: none; background: transparent; padding: 0; cursor: none; outline: none; filter: none !important; }
.need-petal::before { content: ''; position: absolute; left: 50%; bottom: -13px; width: 74%; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--emerald-dark) 0%, var(--emerald) 60%, transparent 100%); z-index: 0; pointer-events: none; }
.need-petal:hover::before, .need-petal.active::before { bottom: -18px; width: 84%; height: 23px; }
.need-petal-inner { width: 100%; height: 100%; background: rgba(80, 200, 120, 0.25); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; position: relative; pointer-events: none; z-index: 2; }
.need-petal-inner::after { content: ''; position: absolute; inset: 1.5px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); z-index: -1; transition: background 0.3s ease; }
.need-petal i { font-size: 26px; color: var(--emerald); transition: color 0.3s ease, transform 0.3s ease; z-index: 2; }
.need-petal:hover, .need-petal.active { transform: translate(-50%, -50%) scale(1.15); z-index: 10; filter: none !important; }
.need-petal:hover .need-petal-inner::after, .need-petal.active .need-petal-inner::after { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); }
.need-petal:hover i, .need-petal.active i { color: #fff; transform: scale(1.1) rotate(-5deg); }

.petal-1 { left: 440px; top: 170px; } .petal-2 { left: 380px; top: 305px; } .petal-3 { left: 440px; top: 440px; } 
.petal-4 { left: 760px; top: 440px; } .petal-5 { left: 820px; top: 305px; } .petal-6 { left: 760px; top: 170px; }

.need-node { position: absolute; z-index: 8; width: 320px; color: var(--ink); transition: transform .32s cubic-bezier(.16,1,.3,1); cursor: none; display: flex; flex-direction: column; background: none; border: none; outline: none; }
.need-node.align-right, .need-node.align-left { text-align: center; align-items: center; }

.node-num { display: inline-block; font-size: 3.5rem; font-weight: 900; line-height: 1; letter-spacing: -2px; color: var(--emerald); text-shadow: none !important; filter: none !important; transition: color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.node-text { margin-top: 5px; color: var(--text-light); font-size: 1rem; font-weight: 600; line-height: 1.45; transition: color .3s ease, transform .3s ease; }
.need-node:hover .node-num, .need-node.active .node-num { color: var(--emerald); text-shadow: none !important; filter: none !important; transform: scale(1.08); }
.need-node:hover .node-text, .need-node.active .node-text { color: var(--emerald-dark); transform: translateY(-2px); }
.need-node:hover, .need-node.active { transform: var(--base-trans) translateY(-5px) !important; }

.node-01 { left: 172px; top: 221px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); }
.node-02 { left: 205px; top: 375px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); }
.node-03 { left: 415px; top: 540px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); } 
.node-04 { left: 785px; top: 540px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); } 
.node-05 { left: 995px; top: 375px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); }
.node-06 { left: 1028px; top: 221px; --base-trans: translate(-50%, -50%); transform: var(--base-trans); }

/* =========================================================
   LOW-COST WEBSITE DESIGN (TABS)
   ========================================================= */
.tabs-section { padding: 100px 10%; background: #fff; }
.tabs-container { max-width: 1300px; margin: 50px auto 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.tabs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tab-btn { background: #fff; border: 1px solid var(--border); padding: 20px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; cursor: none; transition: 0.3s; text-align: center; box-shadow: var(--punchy-shadow-soft);}
.tab-btn i { font-size: 24px; color: var(--emerald); background: var(--emerald-soft); padding: 15px; border-radius: 8px;}
.tab-btn span { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.tab-btn.active, .tab-btn:hover { background: var(--emerald); border-color: var(--emerald); transform: translateY(-5px); box-shadow: var(--punchy-shadow-heavy);}
.tab-btn.active span, .tab-btn:hover span, .tab-btn.active i, .tab-btn:hover i { color: #fff; }
.tab-btn.active i, .tab-btn:hover i { background: rgba(255,255,255,0.2); }
.tab-content-area { display: grid; grid-template-columns: 1fr 1.2fr; background: #fff; border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--punchy-shadow-heavy); overflow: hidden; min-height: 380px; }
.tab-content-img { width: 100%; height: 100%; position: relative; overflow: hidden; background: var(--emerald-soft); }
.tab-content-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.tab-content-area:hover .tab-content-img img { transform: scale(1.08); }
.tab-content-text { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.tab-content-text h3 { font-size: 1.8rem; color: var(--ink); margin-bottom: 20px; font-weight: 700; }
.tab-content-text p { color: var(--text-light); line-height: 1.8; font-size: 0.95rem;}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials-section { padding: 100px 10%; background: #f9f9f9; }
.testi-container { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.phone-mockup { width: 300px; height: 600px; background: #111; border-radius: 40px; padding: 12px; box-shadow: var(--punchy-shadow-heavy); position: relative; margin: auto;}
.phone-screen { width: 100%; height: 100%; background: url('Media/spotlight.jpg') center/cover; border-radius: 30px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.phone-screen::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.play-btn { width: 60px; height: 60px; background: var(--emerald); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 2; cursor: pointer; transition: 0.3s; }
.play-btn:hover { transform: scale(1.1); background: var(--emerald); }

/* =========================================================
   MODIFIED: STEP-BY-STEP TIMELINE
   ========================================================= */
.timeline-section { padding: 100px 10%; background: #fff; text-align: center; }
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; max-width: 1200px; margin: 80px auto 0; }
.timeline-grid::before { content: ''; position: absolute; top: 50%; left: 50px; right: 50px; height: 2px; border-top: 2px dashed var(--emerald-soft); z-index: 1; }
.timeline-step { position: relative; z-index: 2; padding-top: 35px; }
.timeline-step:nth-child(even) { transform: translateY(40px); }

.step-num { width: 60px; height: 60px; background: var(--emerald) !important; color: #fff !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-style: italic; font-weight: 900; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; box-shadow: 0 0 0 8px #fff; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.timeline-step:hover .step-num { transform: translateX(-50%) scale(1.1); box-shadow: 0 0 0 8px rgba(80, 200, 120, 0.3); }

/* Sharper and prominent shadow implemented here */
.timeline-card { background: #fcfcfc; border: 2px solid var(--emerald-soft); border-radius: 12px; padding: 45px 20px 30px; text-align: center; position: relative; overflow: hidden; height: 100%; box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.12) !important; transition: box-shadow 0.3s, transform 0.3s; }
.timeline-step:hover .timeline-card { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,0.25), 0 8px 15px rgba(0,0,0,0.15) !important; }

/* Slight Emerald Gradient Tint implemented here */
.timeline-card-bg { position: absolute; background: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-deep) 100%) !important; z-index: 1; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.timeline-step:nth-child(1) .timeline-card-bg { bottom: -100%; left: 0; width: 100%; height: 100%; }
.timeline-step:nth-child(1):hover .timeline-card-bg { bottom: 0; }
.timeline-step:nth-child(2) .timeline-card-bg { top: 0; left: -100%; width: 100%; height: 100%; }
.timeline-step:nth-child(2):hover .timeline-card-bg { left: 0; }
.timeline-step:nth-child(3) .timeline-card-bg { top: 0; right: -100%; width: 100%; height: 100%; }
.timeline-step:nth-child(3):hover .timeline-card-bg { right: 0; }
.timeline-step:nth-child(4) .timeline-card-bg { top: -100%; left: 0; width: 100%; height: 100%; }
.timeline-step:nth-child(4):hover .timeline-card-bg { top: 0; }

.timeline-content-wrapper { position: relative; z-index: 2; }
.timeline-content-wrapper h4 { color: var(--emerald); font-size: 1.1rem; margin-bottom: 15px; transition: color 0.4s ease; }
.timeline-content-wrapper p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; transition: color 0.4s ease; }
.timeline-step:hover .timeline-content-wrapper h4, 
.timeline-step:hover .timeline-content-wrapper p { color: #fff; }

/* =========================================================
   MODIFIED: SERVICES GRID
   ========================================================= */
.services-grid-section { padding: 100px 10% 130px; background: #f4f6f5; overflow: visible; }
.s-grid { max-width: 1300px; margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.s-card { 
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff !important; 
    border: none !important;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.12) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Made cards 2, 4, 5, and 7 visibly pop against the #f4f6f5 background */
.s-card:nth-child(2), .s-card:nth-child(4), .s-card:nth-child(5), .s-card:nth-child(7) {
    background: #e0f2e6 !important;
}

.s-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 8px 15px rgba(0,0,0,0.15) !important;
}

.s-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}
.s-card-icon {
    width: 45px;
    height: 45px;
    background: #6a2b86; 
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.s-card h3 {
    font-size: 1.05rem;
    color: #1e1e40;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    transition: color 0.3s ease;
}
.s-card-btn {
    background: linear-gradient(to right, #8ec63f, #00a99d);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.3s ease, box-shadow 0.3s ease;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
}
.s-card-btn:hover { filter: brightness(1.1); box-shadow: 0 5px 15px rgba(0, 169, 157, 0.3); }

/* Slide Overlay Hover Animations */
.s-card-slide {
    position: absolute;
    background: var(--emerald);
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.s-card:nth-child(1) .s-card-slide, .s-card:nth-child(6) .s-card-slide { top: -100%; left: 0; width: 100%; height: 100%; }
.s-card:nth-child(1):hover .s-card-slide, .s-card:nth-child(6):hover .s-card-slide { top: 0; }

.s-card:nth-child(2) .s-card-slide, .s-card:nth-child(5) .s-card-slide { top: 0; left: -100%; width: 100%; height: 100%; }
.s-card:nth-child(2):hover .s-card-slide, .s-card:nth-child(5):hover .s-card-slide { left: 0; }

.s-card:nth-child(3) .s-card-slide, .s-card:nth-child(7) .s-card-slide { top: 0; right: -100%; width: 100%; height: 100%; }
.s-card:nth-child(3):hover .s-card-slide, .s-card:nth-child(7):hover .s-card-slide { right: 0; }

.s-card:nth-child(4) .s-card-slide, .s-card:nth-child(8) .s-card-slide { bottom: -100%; left: 0; width: 100%; height: 100%; }
.s-card:nth-child(4):hover .s-card-slide, .s-card:nth-child(8):hover .s-card-slide { bottom: 0; }

.s-card:hover .s-card-header h3 { color: #fff; }
.s-card:hover .s-card-icon { background: rgba(255,255,255,0.2); }



/* =========================================================
   SERVICE PACKAGES & GROWTH SERVICES
   Premium pricing sections added without changing existing animations
   ========================================================= */
.service-packages-section,
.growth-services-section {
    position: relative;
    padding: 110px 10%;
    overflow: hidden;
}
.service-packages-section { background: #fff; }
.growth-services-section { background: #f4f6f5; }
.service-packages-section::before,
.growth-services-section::before {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,200,120,.18), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}
.service-packages-section::before { top: 40px; right: -120px; }
.growth-services-section::before { bottom: 40px; left: -120px; }
.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: 12px;
}
.pricing-grid {
    max-width: 1320px;
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.pricing-card {
    position: relative;
    isolation: isolate;
    min-height: 610px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(80,200,120,.18);
    border-radius: 22px;
    padding: 30px 24px;
    box-shadow: 0 18px 38px rgba(0,0,0,.14), 0 8px 14px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pricing-card::before {
    content: '';
    position: absolute;
    inset: auto -40% -55% -40%;
    height: 72%;
    background: linear-gradient(135deg, rgba(80,200,120,.18), rgba(1,50,32,.08));
    border-radius: 50%;
    z-index: -1;
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s ease;
    opacity: .85;
}
.pricing-card:hover::before { transform: translateY(-18px) scale(1.08); opacity: 1; }
.pricing-card.featured-plan {
    border-color: rgba(80,200,120,.55);
    transform: translateY(-12px);
    box-shadow: 0 26px 52px rgba(0,0,0,.22), 0 16px 28px rgba(80,200,120,.16);
}
.pricing-card.ultra-plan {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,255,248,.96));
}
.pricing-ribbon {
    position: absolute;
    top: 18px;
    right: -38px;
    transform: rotate(38deg);
    background: var(--emerald);
    color: #fff;
    padding: 7px 45px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.pricing-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--emerald-deep);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pricing-topline i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(80,200,120,.12);
    color: var(--emerald);
}
.pricing-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.35rem;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 14px;
}
.pricing-subtitle {
    color: var(--text-light);
    font-size: .92rem;
    line-height: 1.7;
    min-height: 80px;
}
.price-tag {
    margin: 20px 0 10px;
    color: var(--emerald-dark);
    font-weight: 900;
    font-size: 2.5rem;
    letter-spacing: -1px;
}
.price-tag span { color: var(--emerald); }
.price-tag small {
    font-size: .86rem;
    font-weight: 700;
    color: var(--text-light);
    letter-spacing: 0;
}
.price-note {
    color: #4c4c63;
    font-size: .84rem;
    line-height: 1.65;
    margin-bottom: 18px;
}
.pricing-card ul {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
}
.pricing-card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #33334d;
    font-size: .87rem;
    line-height: 1.5;
}
.pricing-card li i { color: var(--emerald); margin-top: 3px; }
.package-cta,
.growth-card button,
.package-footnote button {
    margin-top: auto;
    border: none;
    border-radius: 999px;
    background: linear-gradient(to right, #8ec63f, #00a99d);
    color: #fff;
    padding: 13px 22px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0,169,157,.22);
    transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}
.package-cta:hover,
.growth-card button:hover,
.package-footnote button:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 18px 34px rgba(0,169,157,.28);
}
.package-footnote {
    max-width: 1320px;
    margin: 28px auto 0;
    padding: 24px 28px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(1,50,32,.96), rgba(10,90,54,.94));
    color: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    box-shadow: var(--punchy-shadow-soft);
}
.package-footnote i {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    color: var(--emerald);
    font-size: 18px;
}
.package-footnote strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.package-footnote span { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.55; }
.growth-grid {
    max-width: 1320px;
    margin: 55px auto 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.growth-card {
    position: relative;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(80,200,120,.18);
    border-radius: 20px;
    padding: 28px 24px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 32px rgba(0,0,0,.13);
    overflow: hidden;
}
.growth-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 5px;
    background: linear-gradient(to right, #8ec63f, #00a99d);
}
.wide-growth-card { grid-column: span 2; }
.growth-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--emerald-soft);
    color: var(--emerald-deep);
    font-size: 20px;
    margin-bottom: 18px;
}
.growth-card h3 {
    color: var(--ink);
    font-size: 1.12rem;
    line-height: 1.35;
    margin-bottom: 12px;
}
.growth-card p {
    color: var(--text-light);
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 18px;
}
.growth-price {
    color: var(--emerald-dark);
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 20px;
}
.growth-price span {
    display: block;
    color: var(--text-light);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 4px;
}
@media screen and (max-width: 1180px) {
    .pricing-grid,
    .growth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wide-growth-card { grid-column: span 2; }
    .pricing-card.featured-plan { transform: none; }
}
@media screen and (max-width: 768px) {
    .service-packages-section,
    .growth-services-section { padding: 76px 6%; }
    .pricing-grid,
    .growth-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
    .wide-growth-card { grid-column: span 1; }
    .pricing-card { min-height: auto; padding: 26px 22px; border-radius: 20px; }
    .pricing-card h3 { font-size: 2rem; }
    .pricing-subtitle { min-height: 0; }
    .price-tag { font-size: 2.1rem; }
    .package-footnote { grid-template-columns: 1fr; text-align: left; padding: 24px; }
    .package-footnote button { width: 100%; }
}

/* =========================================================
   PORTFOLIO DOUBLE MOCKUP
   ========================================================= */
.portfolio-section { padding: 100px 10%; background: #fff; }
.portfolio-showcase { max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
.mockup-group { position: relative; height: 450px; }
.laptop-mock { position: absolute; width: 80%; left: 0; top: 50%; transform: translateY(-50%); border-radius: 12px; box-shadow: var(--punchy-shadow-heavy); border: 8px solid #333; border-bottom-width: 12px;}
.mobile-mock { position: absolute; width: 30%; right: 5%; bottom: 20px; border-radius: 24px; box-shadow: var(--punchy-shadow-heavy); border: 6px solid #111; z-index: 5;}

/* =========================================================
   FAQ & BLOGS
   ========================================================= */
.faq-blog-section { padding: 100px 10%; background: #f9f9f9; }
.faq-blog-grid { max-width: 1300px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.section-header h2 { font-size: 2.2rem; font-family: 'Playfair Display', serif; color: var(--ink); }
.accordion-item { background: #fff; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); overflow: hidden; }
.accordion-header { padding: 20px; display: flex; justify-content: space-between; font-weight: 600; cursor: pointer; color: var(--ink); }
.accordion-body { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: var(--text-light); font-size: 0.9rem; line-height: 1.6;}
.accordion-item.active .accordion-body { padding: 0 20px 20px; max-height: 900px; }
.accordion-item.active .accordion-header { color: var(--emerald); }
.accordion-header i { color: var(--emerald); transition: transform 0.3s; }
.accordion-item.active .accordion-header i { transform: rotate(45deg); }
.blog-item { background: #fff; padding: 25px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); transition: 0.3s; border-left: 3px solid transparent;}
.blog-item:hover { border-left-color: var(--emerald); transform: translateX(5px); box-shadow: var(--punchy-shadow-soft); }
.blog-item h4 { font-size: 1.1rem; color: var(--ink); margin-bottom: 10px; }
.blog-meta { font-size: 0.8rem; color: #999; display: flex; gap: 15px; }
.blog-meta i { color: var(--emerald); }

/* =========================================================
   INDUSTRIES / EXPERTISE
   ========================================================= */
.industries-section { padding: 96px 10% 112px; background: #fff; position: relative; overflow: hidden; }
.industries-section::before { content: ''; position: absolute; width: 480px; height: 480px; right: -180px; top: 48px; background: radial-gradient(circle, rgba(80,200,120,0.14), transparent 65%); pointer-events: none; }
.industries-section::after { content: ''; position: absolute; width: 420px; height: 420px; left: -170px; bottom: -180px; background: radial-gradient(circle, rgba(1,50,32,0.10), transparent 68%); pointer-events: none; }
.reference-title { position: relative; z-index: 2; text-align: center; margin: 0 auto 34px; max-width: 980px; }
.reference-title .eyebrow { display: block; color: #2d2845; font-size: 14px; font-weight: 500; line-height: 1.35; margin-bottom: 3px; }
.reference-title h2 { color: var(--emerald-dark); font-size: 30px; line-height: 1.04; font-weight: 900; font-style: italic; letter-spacing: -0.8px; margin-bottom: 14px; }
.reference-title h2 span { color: var(--emerald); }
.reference-title p { font-size: 11px; color: #2f2f3a; line-height: 1.7; max-width: 920px; margin: 0 auto; }
.reference-panel { --panel-x: 50%; --panel-y: 50%; position: relative; z-index: 2; max-width: 1120px; min-height: 336px; margin: 0 auto; display: grid; grid-template-columns: 336px 1fr; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,0.88); border: 1px solid rgba(80,200,120,0.14); box-shadow: var(--punchy-shadow-heavy); isolation: isolate; }
.reference-panel::before { content: ''; position: absolute; width: 220px; height: 220px; left: var(--panel-x); top: var(--panel-y); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(80,200,120,0.23), rgba(80,200,120,0.10) 42%, transparent 72%); opacity: 0; filter: blur(6px); transition: opacity .25s ease, width .25s ease, height .25s ease; z-index: 0; pointer-events: none; }
.reference-panel.is-tracking::before { opacity: 1; width: 280px; height: 280px; }
.reference-sidebar { position: relative; z-index: 2; padding: 26px 20px; background: linear-gradient(180deg, #0b2f20 0%, #09271c 100%); color: #fff; display: flex; flex-direction: column; gap: 7px; box-shadow: inset -1px 0 rgba(255,255,255,0.06); }
.reference-nav-item { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 39px; border: 0; border-radius: 6px; padding: 9px 12px; color: rgba(255,255,255,0.92); background: transparent; text-align: left; font-size: 12px; font-weight: 600; cursor: none; transition: transform .28s cubic-bezier(.16,1,.3,1), background .28s ease, color .28s ease, box-shadow .28s ease; }
.reference-nav-item .nav-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.96); font-size: 12px; transition: all .28s ease; }
.reference-nav-item:hover, .reference-nav-item.active { background: linear-gradient(90deg, rgba(80,200,120,0.85), rgba(10,90,54,0.92)); color: #fff; transform: translateX(5px); box-shadow: 0 10px 24px rgba(80,200,120,0.22); }
.reference-nav-item:hover .nav-icon, .reference-nav-item.active .nav-icon { background: rgba(255,255,255,0.20); transform: scale(1.06) rotate(-3deg); }
.reference-content { position: relative; z-index: 1; padding: 24px 28px 30px; background: radial-gradient(circle at var(--panel-x) var(--panel-y), rgba(80,200,120,0.08), transparent 34%), rgba(255,255,255,0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); gap: 12px 28px; align-content: start; max-width: 690px; }
.reference-card { --card-x: 50%; --card-y: 50%; position: relative; min-height: 56px; display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(80,200,120,0.13); background: rgba(248,252,249,0.94); color: #1e2440; box-shadow: 0 8px 20px rgba(35, 31, 76, 0.06); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.985); animation: referenceCardIn .42s cubic-bezier(.16,1,.3,1) forwards; transition: transform .32s cubic-bezier(.16,1,.3,1), background .32s ease, color .32s ease, box-shadow .32s ease, border-color .32s ease; }
.reference-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--card-x) var(--card-y), rgba(80,200,120,0.20), transparent 42%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.reference-card:nth-child(2) { animation-delay: .035s; } .reference-card:nth-child(3) { animation-delay: .07s; } .reference-card:nth-child(4) { animation-delay: .105s; } .reference-card:nth-child(5) { animation-delay: .14s; } .reference-card:nth-child(6) { animation-delay: .175s; } .reference-card:nth-child(7) { animation-delay: .21s; } .reference-card:nth-child(8) { animation-delay: .245s; } .reference-card:nth-child(9) { animation-delay: .28s; }
@keyframes referenceCardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.reference-card .platform-icon { position: relative; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 14px; color: var(--emerald); background: rgba(80,200,120,0.13); border: 1px solid rgba(80,200,120,0.15); transition: all .32s ease; }
.reference-card span { position: relative; z-index: 2; font-size: 12px; font-weight: 600; }
.reference-card:hover, .reference-card.active { background: linear-gradient(90deg, #09291d 0%, #0a5a36 100%); border-color: rgba(80,200,120,0.65); color: #fff; transform: translateY(-5px) scale(1.015); box-shadow: var(--punchy-shadow-soft); }
.reference-card:hover::before, .reference-card.active::before { opacity: 1; }
.reference-card:hover .platform-icon, .reference-card.active .platform-icon { color: #fff; background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.24); transform: rotate(-6deg) scale(1.08); }
.reference-note { margin-top: 24px; max-width: 650px; color: #587063; font-size: 12px; line-height: 1.7; }
.reference-note strong { color: var(--emerald-dark); }
.reference-cursor-label { position: absolute; right: 26px; bottom: 20px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(80,200,120,0.16); color: var(--emerald-dark); font-size: 11px; font-weight: 700; letter-spacing: .4px; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.reference-panel.is-tracking .reference-cursor-label { opacity: 1; transform: translateY(0); }

/* =========================================================
   FLOATING ELEMENTS
   ========================================================= */
.whatsapp-wrapper { position: fixed; bottom: 30px; right: 30px; z-index: 9999; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.whatsapp-btn { position: relative; background: var(--emerald); color: #fff; width: 65px; height: 65px; font-size: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 10px 25px rgba(80, 200, 120, 0.4); z-index: 2; transition: 0.3s; }
.whatsapp-btn:hover { transform: scale(1.1); background: var(--emerald-dark); }
.whatsapp-radar { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(80, 200, 120, 0.4); z-index: 1; animation: radarPulse 2s infinite ease-out; pointer-events: none; }
.whatsapp-radar:nth-child(2) { animation-delay: 1s; }
@keyframes radarPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }

/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; }
.modal-overlay.active { display: flex; }
.modal-container { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,0.2); max-width: 600px; width: 92%; padding: 40px; position: relative; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 28px; color: #999; transition: 0.3s; cursor: pointer;}
.modal-close:hover { color: var(--emerald); transform: rotate(90deg); }
.modal-header h2 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--ink); margin-bottom: 10px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;}
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.9); outline: none; transition: 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); }
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.show { display: block; animation: slideUp 0.4s ease; }
.success-icon { font-size: 48px; color: var(--emerald); margin-bottom: 15px; }
.form-success h3 { font-size: 1.8rem; color: var(--ink); margin-bottom: 10px; font-family: 'Playfair Display', serif; font-weight: 700; }
.form-success p { color: var(--text-light); line-height: 1.6; font-size: 1rem; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   FOOTER
   ========================================================= */
footer { padding: 80px 10% 30px; background: #111; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
footer h3, footer h4 { color: var(--emerald); margin-bottom: 20px; }
footer p, footer a { color: #aaa; font-size: 0.9rem; line-height: 1.8; transition: 0.3s; display: block; margin-bottom: 10px;}
footer a:hover { color: var(--emerald); transform: translateX(5px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; font-size: 0.8rem; color: #777; }

@media screen and (max-width: 992px) {
    .quick-capture-grid, .logos-grid-container, .tabs-container, .testi-container, .timeline-grid, .s-grid, .portfolio-showcase, .faq-blog-grid, .industry-panel { grid-template-columns: 1fr; display: flex; flex-direction: column;}
    .timeline-grid::before { display: none; }
    .timeline-step:nth-child(even) { transform: translateY(0); margin-top: 20px; }
    .rotating-vector { display: none; }
    .tab-content-area { grid-template-columns: 1fr; }
    .quick-form-grid { grid-template-columns: 1fr; }
}
/* =========================================================
   PRODUCTION PATCH: MOBILE NAVIGATION + RESPONSIVE POLISH
   ========================================================= */
body.nav-lock,
body.modal-lock { overflow: hidden; }

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(1, 18, 12, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    z-index: 998;
}
.mobile-nav-backdrop.active { opacity: 1; visibility: visible; }

.captcha-challenge {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(80,200,120,0.24);
    border-radius: 12px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.captcha-label {
    display: block;
    font-size: 10px;
    color: var(--text-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 2px;
}
.captcha-challenge strong { color: var(--emerald-dark); font-size: 13px; }
.captcha-refresh {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--emerald-soft);
    color: var(--emerald-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: none;
    transition: transform .25s ease, background .25s ease;
}
.captcha-refresh:hover { transform: rotate(90deg); background: rgba(80,200,120,.22); }

@media screen and (max-width: 1180px) {
    header { padding: 22px 28px; }
    nav ul { gap: 18px; }
    .logo { font-size: 21px; }
    .section-padding,
    .journey-section,
    .quick-capture-section,
    .logos-section,
    .needs-section,
    .tabs-section,
    .testimonials-section,
    .timeline-section,
    .services-grid-section,
    .portfolio-section,
    .faq-blog-section,
    .industries-section,
    footer { padding-left: 6%; padding-right: 6%; }
}

@media screen and (max-width: 992px) {
    * { cursor: auto; }
    .cursor-dot, .cursor-ring, .cursor-glow { display: none !important; }

    header,
    header.scrolled {
        top: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        padding: 14px 18px;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid rgba(80,200,120,.14);
        box-shadow: 0 12px 32px rgba(0,0,0,.08);
    }
    .logo { font-size: 15px; letter-spacing: 1px; max-width: calc(100% - 62px); line-height: 1.2; }
    .logo img { height: 30px; margin-right: 8px; }

    .mobile-menu-toggle {
        display: inline-flex;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(80,200,120,.26);
        border-radius: 14px;
        background: rgba(255,255,255,.86);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
        z-index: 1002;
    }
    .mobile-menu-toggle span {
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: var(--emerald-dark);
        transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .22s ease, width .22s ease;
    }
    .mobile-menu-toggle.toggle-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .mobile-menu-toggle.toggle-active span:nth-child(2) { opacity: 0; width: 0; }
    .mobile-menu-toggle.toggle-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    header nav {
        position: fixed;
        top: 0;
        right: 0;
        width: min(88vw, 390px);
        height: 100vh;
        transform: translateX(105%);
        padding: 94px 24px 36px;
        background:
            radial-gradient(circle at 90% 0%, rgba(80,200,120,.18), transparent 34%),
            rgba(255,255,255,.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid rgba(80,200,120,.18);
        box-shadow: -24px 0 60px rgba(0,0,0,.18);
        z-index: 1001;
        overflow-y: auto;
        transition: transform .42s cubic-bezier(.16,1,.3,1);
    }
    header nav.nav-open { transform: translateX(0); }
    nav ul { flex-direction: column; gap: 9px; width: 100%; }
    .nav-item { display: block; width: 100%; }
    nav a {
        width: 100%;
        justify-content: space-between;
        padding: 14px 14px;
        border: 1px solid rgba(80,200,120,.12);
        border-radius: 14px;
        background: rgba(255,255,255,.64);
        font-size: 13px;
        letter-spacing: 1px;
    }
    nav a:hover,
    nav a.active { color: var(--emerald-dark); background: rgba(80,200,120,.12); }
    header nav ul li a::before { display: none !important; }

    .has-submenu::after {
        content: '+';
        color: var(--emerald);
        font-size: 18px;
        line-height: 1;
        transition: transform .25s ease;
    }
    .nav-item.submenu-open .has-submenu::after { transform: rotate(45deg); }

    .services-banner {
        position: static;
        transform: none;
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 14px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0;
        padding: 0 14px;
        border: 0;
        box-shadow: none;
        background: transparent;
        transition: max-height .32s ease, opacity .32s ease, margin .32s ease, padding .32s ease;
    }
    .nav-item:hover .services-banner { display: grid !important; }
    .nav-item.submenu-open .services-banner {
        max-height: 360px;
        opacity: 1;
        margin-top: 8px;
        padding: 12px 14px 14px;
        border: 1px solid rgba(80,200,120,.12);
        border-radius: 14px;
        background: rgba(248,252,249,.84);
    }
    .service-column a { border: 0; background: transparent; border-radius: 8px; padding: 8px 0; }

    #hero-slider {
        height: 76vh;
        min-height: 560px;
        margin-top: 74px;
        padding: 0 18px;
        background-position: center !important;
    }
    .hero-title { font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.05; }
    .hero-subtext { font-size: 12px; letter-spacing: 2px; }
    .slider-controls { width: calc(100% - 24px); left: 12px; right: 12px; }
    .slider-arrow { width: 42px; height: 42px; }
    .top-proposal-strip { padding: 30px 18px; }
    .dual-action { flex-direction: column; width: 100%; gap: 14px; padding: 18px; }
    .dual-action button,
    .dual-action a { width: 100%; justify-content: center; text-align: center; }

    .journey-section,
    .quick-capture-section,
    .logos-section,
    .needs-section,
    .tabs-section,
    .testimonials-section,
    .timeline-section,
    .services-grid-section,
    .portfolio-section,
    .faq-blog-section,
    .industries-section { padding: 70px 20px; }

    .journey-wrap,
    .quick-capture-grid,
    .logos-grid-container,
    .tabs-container,
    .testi-container,
    .timeline-grid,
    .s-grid,
    .portfolio-showcase,
    .faq-blog-grid,
    .footer-grid { grid-template-columns: 1fr !important; gap: 34px; }
    .journey-copy h2,
    .section-title h2,
    .stats-title { font-size: clamp(2rem, 8vw, 2.65rem); }
    .journey-text-container { padding-left: 16px; }
    .media-grid { min-height: 360px; }
    .main-img { width: 74%; }
    .sub-img { width: 42%; }
    .stat-row { grid-template-columns: 1fr; gap: 18px; }
    .quick-form-grid { grid-template-columns: 1fr !important; }
    .quick-form input,
    .quick-form textarea,
    .captcha-challenge { grid-column: span 1; }

    .phone-field { gap: 8px; }
    .phone-field .country-code-select { flex-basis: 112px; min-width: 104px; font-size: 13px; }


    .needs-stage {
        transform: scale(.74);
        transform-origin: center top;
        min-height: 620px;
        margin-bottom: -120px;
    }
    .need-node { width: 138px; min-height: 118px; }
    .need-node .node-text { font-size: 11px; }

    .tabs-grid { grid-template-columns: 1fr; }
    .tab-content-area { grid-template-columns: 1fr !important; padding: 22px; }
    .tab-content-img { min-height: 260px; }
    .mockup-group { height: 330px; }
    .laptop-mock { width: 88%; }
    .mobile-mock { width: 34%; }

    .reference-panel { grid-template-columns: 1fr; min-height: 0; }
    .reference-sidebar { flex-direction: row; overflow-x: auto; padding: 16px; gap: 8px; }
    .reference-nav-item { min-width: max-content; }
    .reference-content { padding: 20px; }
    .reference-grid { grid-template-columns: 1fr; max-width: 100%; }
    .reference-cursor-label { display: none; }

    .form-row { grid-template-columns: 1fr; gap: 12px; }
    .modal-overlay { padding: 18px; align-items: flex-start; overflow-y: auto; }
    .modal-container { width: 100%; padding: 28px 20px; margin: 24px 0; }
    .modal-header h2 { font-size: 1.8rem; padding-right: 32px; }

    .whatsapp-wrapper { right: 18px; bottom: 18px; width: 58px; height: 58px; }
    .whatsapp-btn { width: 56px; height: 56px; font-size: 28px; }
    footer { padding: 64px 22px 24px; }
    .footer-bottom { flex-direction: column; gap: 10px; }
}

@media screen and (max-width: 560px) {
    .logo { font-size: 12px; letter-spacing: .6px; }
    .logo img { height: 27px; }
    #hero-slider { min-height: 520px; height: 72vh; }
    .hero-title { font-size: clamp(2rem, 12vw, 3.1rem); }
    .magnetic-btn { width: 100%; padding: 14px 22px; }
    .section-title p,
    .journey-text-container p { font-size: .92rem; }
    .media-grid { min-height: 300px; }
    .needs-stage {
        transform: scale(.56);
        min-height: 520px;
        margin-left: -84px;
        margin-right: -84px;
        margin-bottom: -185px;
    }
    .section-header { align-items: flex-start; flex-direction: column; gap: 12px; }
    .blog-meta { flex-direction: column; gap: 4px; }
    .mockup-group { height: 260px; }
}

/* =========================================================
   REQUESTED PATCH: alignment and mobile form/grid polish
   ========================================================= */
.s-card-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tab-btn {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tab-btn i {
    align-self: center;
}

@media screen and (max-width: 992px) {
    .quick-capture-grid {
        width: 100%;
        align-items: stretch !important;
    }

    .quick-capture-grid > div {
        width: 100%;
    }

    .tabs-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100%;
    }

    .tab-btn {
        min-height: 150px;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 22px 14px;
    }

    .tab-btn i {
        align-self: center;
    }

    .quick-form-container,
    .quick-form {
        width: 100%;
    }

    .quick-form-grid {
        width: 100%;
        max-width: 620px;
        margin: 0 auto 15px;
        gap: 12px;
    }

    .quick-form input,
    .quick-form textarea {
        min-height: 54px;
        padding: 12px 18px;
        font-size: 0.95rem;
    }

    .quick-form textarea {
        min-height: 76px;
    }

    .quick-submit {
        min-height: 58px;
        height: auto;
    }

    .s-card-btn {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 560px) {
    .tabs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .tab-btn {
        min-height: 136px;
        padding: 18px 10px;
        border-radius: 14px;
    }

    .tab-btn i {
        font-size: 22px;
        padding: 13px;
    }

    .tab-btn span {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .quick-form-grid {
        max-width: 100%;
    }

    .quick-form input,
    .quick-form textarea {
        min-height: 50px;
        padding: 11px 16px;
    }

    .quick-form textarea {
        min-height: 70px;
    }
}

/* =========================================================
   MOBILE QA PATCH: homepage polish from screen-recording review
   - Fixes horizontal overflow, broken radial section scaling,
     cramped logos/stats, oversized media cards, and mobile CTA layout.
   ========================================================= */
@media screen and (max-width: 992px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .cursor-dot,
    .cursor-ring,
    .cursor-glow {
        display: none !important;
    }

    * {
        cursor: auto !important;
    }

    header,
    header.scrolled {
        min-height: 66px;
        padding: 12px 16px !important;
    }

    .logo {
        min-width: 0;
        max-width: calc(100vw - 78px) !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #hero-slider {
        height: auto !important;
        min-height: 620px !important;
        margin-top: 66px !important;
        padding: 86px 18px 92px !important;
        justify-content: center;
    }

    .hero-content {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
    }

    .hero-title {
        margin-bottom: 28px !important;
        text-wrap: balance;
    }

    .slider-controls {
        top: auto !important;
        bottom: 86px !important;
        transform: none !important;
        padding: 0 18px !important;
    }

    .slider-dots {
        bottom: 40px !important;
        gap: 10px !important;
    }

    .top-proposal-strip {
        padding: 24px 18px 48px !important;
    }

    .dual-action {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .dual-action button,
    .dual-action a {
        min-height: 52px !important;
        border-radius: 999px !important;
        padding: 0 18px !important;
        box-shadow: 0 12px 26px rgba(0,0,0,.14) !important;
    }

    .dual-action button {
        background: var(--emerald) !important;
    }

    .dual-action a {
        background: var(--emerald-dark) !important;
    }

    .dual-action .or {
        position: static !important;
        justify-self: center;
        transform: none !important;
        width: 34px !important;
        height: 34px !important;
        margin: -4px 0 !important;
        font-size: 10px !important;
        box-shadow: 0 8px 18px rgba(0,0,0,.12) !important;
    }

    .journey-section,
    .quick-capture-section,
    .logos-section,
    .needs-section,
    .tabs-section,
    .testimonials-section,
    .timeline-section,
    .services-grid-section,
    .portfolio-section,
    .faq-blog-section,
    .industries-section {
        padding: 64px 18px !important;
    }

    .section-title {
        margin-bottom: 34px !important;
    }

    .section-title h2,
    .journey-copy h2,
    .needs-section .section-title h2,
    .needs-section .section-title h2 span,
    .stats-title {
        font-size: clamp(1.95rem, 8.2vw, 2.65rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.04em;
        text-wrap: balance;
    }

    .section-title p,
    .journey-text-container p,
    .logos-text p,
    .tab-content-text p,
    .reference-title p {
        font-size: .94rem !important;
        line-height: 1.72 !important;
    }

    .journey-wrap,
    .quick-capture-grid,
    .logos-grid-container,
    .tabs-container,
    .testi-container,
    .timeline-grid,
    .s-grid,
    .portfolio-showcase,
    .faq-blog-grid,
    .footer-grid {
        gap: 28px !important;
    }

    .rotating-vector {
        width: 330px !important;
        height: 330px !important;
        left: -185px !important;
        opacity: .22 !important;
    }

    .journey-text-container {
        margin-bottom: 18px !important;
    }

    .read-more-toggle {
        margin-left: 0 !important;
    }

    .journey-media {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
    }

    .media-grid {
        display: grid !important;
        grid-template-columns: 1.12fr .88fr !important;
        grid-template-rows: repeat(2, minmax(128px, auto)) !important;
        min-height: 0 !important;
        gap: 12px !important;
    }

    .media-grid .main-img {
        width: 100% !important;
        min-height: 316px !important;
        grid-row: 1 / 3 !important;
    }

    .media-grid .sub-img {
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
    }

    .half-circle-vector {
        width: 96px !important;
        height: 48px !important;
        top: -18px !important;
        left: -8px !important;
    }

    .expertise-hover-badge {
        width: min(76%, 238px) !important;
        padding: 13px 15px !important;
        font-size: .76rem !important;
        line-height: 1.45 !important;
    }

    .quick-subheading {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }

    .stat-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    .stat-block {
        padding: 12px 8px 15px !important;
        border-radius: 14px;
        background: rgba(255,255,255,.56);
        text-align: center;
        box-shadow: 0 10px 22px rgba(0,0,0,.06);
    }

    .stat-block h3 {
        font-size: clamp(1rem, 4.7vw, 1.55rem) !important;
        letter-spacing: -.04em;
    }

    .stat-block p {
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    .stat-underline {
        left: 12px !important;
        width: calc(100% - 24px) !important;
        height: 3px !important;
    }

    .quick-form-container {
        background: rgba(255,255,255,.58) !important;
        border: 1px solid rgba(80,200,120,.12) !important;
        border-radius: 20px !important;
        padding: 16px !important;
        box-shadow: 0 20px 45px rgba(0,0,0,.08) !important;
    }

    .quick-form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    .quick-form input,
    .quick-form textarea,
    .captcha-challenge,
    .fake-captcha {
        border-radius: 12px !important;
    }

    .logos-section {
        padding-top: 56px !important;
    }

    .logos-text {
        text-align: left;
    }

    .logos-text h2 {
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
        line-height: 1.15 !important;
        text-wrap: balance;
    }

    .logos-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100%;
    }

    .logo-box {
        min-height: 82px !important;
        padding: 16px 12px !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
    }

    .logo-box img {
        max-width: min(100%, 118px) !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    .needs-section {
        overflow: hidden !important;
    }

    .needs-section .section-title {
        margin-bottom: 24px !important;
    }

    .needs-section .section-title h2 span {
        display: inline !important;
        letter-spacing: -.05em !important;
    }

    .needs-stage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .needs-connector-svg,
    .need-petal,
    .needs-hub-wrap {
        display: none !important;
    }

    .need-node {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-height: 136px !important;
        transform: none !important;
        padding: 16px 13px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(80,200,120,.16) !important;
        background: rgba(255,255,255,.88) !important;
        box-shadow: 0 16px 34px rgba(0,0,0,.10) !important;
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .need-node:hover,
    .need-node.active {
        transform: translateY(-3px) !important;
        background: linear-gradient(180deg, #ffffff 0%, #f3fff7 100%) !important;
    }

    .node-num {
        font-size: 1.65rem !important;
        letter-spacing: -.06em !important;
        margin-bottom: 8px !important;
    }

    .need-node .node-text,
    .node-text {
        margin-top: 0 !important;
        font-size: .82rem !important;
        line-height: 1.35 !important;
        color: #33423a !important;
    }

    .tabs-container {
        margin-top: 30px !important;
    }

    .tabs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .tab-btn {
        min-height: 126px !important;
        padding: 16px 10px !important;
        gap: 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
    }

    .tab-btn i {
        font-size: 20px !important;
        padding: 12px !important;
    }

    .tab-btn span {
        font-size: .78rem !important;
        line-height: 1.28 !important;
    }

    .tab-content-area {
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    .tab-content-img {
        min-height: 220px !important;
    }

    .tab-content-text {
        padding: 22px !important;
    }

    .tab-content-text h3 {
        font-size: 1.35rem !important;
        margin-bottom: 12px !important;
    }

    .phone-mockup {
        width: min(78vw, 286px) !important;
        height: min(138vw, 560px) !important;
        border-radius: 34px !important;
    }

    .testi-text h2,
    .timeline-section .section-title h2,
    .timeline-section .section-title h2 span {
        font-size: clamp(2rem, 8.4vw, 2.65rem) !important;
        line-height: 1.14 !important;
        text-wrap: balance;
    }

    .timeline-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-top: 42px !important;
    }

    .timeline-grid::before {
        display: none !important;
    }

    .timeline-step,
    .timeline-step:nth-child(even) {
        transform: none !important;
        padding-top: 0 !important;
    }

    .step-num {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto -24px !important;
    }

    .timeline-card {
        padding: 44px 18px 24px !important;
        min-height: 0 !important;
    }

    .s-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .s-card {
        min-height: 150px !important;
        padding: 22px 18px !important;
        border-radius: 18px !important;
    }

    .s-card-header {
        margin-bottom: 18px !important;
        align-items: center !important;
    }

    .s-card h3 {
        font-size: 1rem !important;
    }

    .portfolio-showcase {
        text-align: left;
    }

    .mockup-group {
        height: 310px !important;
        margin-top: 8px !important;
    }

    .laptop-mock {
        width: 92% !important;
        left: 0 !important;
        border-width: 6px !important;
        border-bottom-width: 10px !important;
    }

    .mobile-mock {
        width: 34% !important;
        right: 0 !important;
        bottom: 24px !important;
    }

    .section-header {
        margin-bottom: 20px !important;
    }

    .blog-item,
    .accordion-item {
        border-radius: 16px !important;
    }

    .blog-item {
        padding: 18px !important;
    }

    .reference-title h2 {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.08 !important;
    }

    .reference-panel {
        border-radius: 20px !important;
        box-shadow: 0 18px 40px rgba(0,0,0,.14) !important;
    }

    .reference-sidebar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .reference-sidebar::-webkit-scrollbar {
        display: none;
    }

    .reference-nav-item {
        min-height: 44px !important;
        border-radius: 999px !important;
        white-space: nowrap;
    }

    .reference-grid {
        gap: 10px !important;
    }

    .reference-card {
        min-height: 54px !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
    }

    .whatsapp-wrapper {
        right: 14px !important;
        bottom: 14px !important;
        width: 54px !important;
        height: 54px !important;
    }

    .whatsapp-btn {
        width: 52px !important;
        height: 52px !important;
        font-size: 25px !important;
    }
}

@media screen and (max-width: 560px) {
    header,
    header.scrolled {
        padding: 10px 13px !important;
    }

    .logo {
        font-size: 11px !important;
        letter-spacing: .35px !important;
        max-width: calc(100vw - 72px) !important;
    }

    .logo img {
        height: 25px !important;
        margin-right: 6px !important;
    }

    .mobile-menu-toggle {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    header nav {
        width: min(92vw, 360px) !important;
        padding: 86px 18px 28px !important;
    }

    #hero-slider {
        min-height: 590px !important;
        padding: 72px 16px 92px !important;
    }

    .hero-title {
        font-size: clamp(2rem, 11.5vw, 3rem) !important;
        line-height: 1.06 !important;
    }

    .hero-subtext {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }

    .journey-section,
    .quick-capture-section,
    .logos-section,
    .needs-section,
    .tabs-section,
    .testimonials-section,
    .timeline-section,
    .services-grid-section,
    .portfolio-section,
    .faq-blog-section,
    .industries-section {
        padding: 54px 16px !important;
    }

    .section-title h2,
    .journey-copy h2,
    .needs-section .section-title h2,
    .needs-section .section-title h2 span,
    .stats-title {
        font-size: clamp(1.78rem, 9vw, 2.3rem) !important;
    }

    .media-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 168px 168px !important;
    }

    .media-grid .main-img {
        min-height: 348px !important;
    }

    .media-grid .sub-img {
        min-height: 168px !important;
    }

    .expertise-hover-badge {
        width: 84% !important;
        font-size: .7rem !important;
        padding: 11px 12px !important;
    }

    .stat-row {
        gap: 8px !important;
    }

    .stat-block {
        padding: 10px 5px 14px !important;
    }

    .stat-block h3 {
        font-size: clamp(.92rem, 4.6vw, 1.22rem) !important;
    }

    .stat-block p {
        font-size: .62rem !important;
    }

    .logos-grid,
    .needs-stage,
    .tabs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .logo-box {
        min-height: 76px !important;
        padding: 14px 10px !important;
    }

    .logo-box img {
        max-height: 38px !important;
    }

    .need-node {
        min-height: 128px !important;
        padding: 14px 11px !important;
    }

    .node-num {
        font-size: 1.45rem !important;
    }

    .need-node .node-text,
    .node-text {
        font-size: .76rem !important;
    }

    .tab-btn {
        min-height: 118px !important;
    }

    .tab-content-img {
        min-height: 190px !important;
    }

    .mockup-group {
        height: 260px !important;
    }

    .reference-content {
        padding: 16px !important;
    }

    .footer-bottom {
        text-align: left;
    }
}

@media screen and (max-width: 380px) {
    .stat-row,
    .logos-grid,
    .needs-stage,
    .tabs-grid {
        grid-template-columns: 1fr !important;
    }

    .media-grid {
        display: block !important;
    }

    .media-grid .main-img,
    .media-grid .sub-img {
        min-height: 220px !important;
        margin-bottom: 12px;
    }
}


/* SEO FAQ enhancement */
.faq-heading-wrap { align-items: flex-start; }
.faq-seo-intro { max-width: 620px; margin-top: 10px; color: var(--text-light); line-height: 1.75; font-size: .95rem; }
.faq-blog-section .eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emerald); margin-bottom: 8px; }
.faq-blog-section .accordion-body { font-size: .94rem; line-height: 1.75; }
.faq-blog-section .accordion-header { gap: 16px; align-items: center; line-height: 1.35; }
@media screen and (max-width: 768px) {
    .faq-seo-intro { font-size: .9rem; line-height: 1.65; }
    .faq-blog-section .accordion-header { padding: 18px 16px; font-size: .96rem; }
    .faq-blog-section .accordion-body { padding-left: 16px; padding-right: 16px; font-size: .88rem; }
    .accordion-item.active .accordion-body { padding: 0 16px 18px; max-height: 1100px; }
}


/* FAQ clipping fix: allow long SEO answers to expand fully on desktop and mobile */
.faq-blog-section .accordion-item.active .accordion-body {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 24px !important;
}

.faq-blog-section .accordion-item {
    overflow: visible !important;
}

.faq-blog-section .accordion-body {
    word-break: normal;
    overflow-wrap: anywhere;
}

@media screen and (max-width: 768px) {
    .faq-blog-section .accordion-item.active .accordion-body {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 16px 22px !important;
    }
}

/* =========================================================
   SECURITY / reCAPTCHA v3 NOTES
   ========================================================= */
.recaptcha-note {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: rgba(80, 200, 120, 0.09);
    border: 1px solid rgba(80, 200, 120, 0.28);
    border-radius: 14px;
    padding: 13px 15px;
    color: #245c3b;
    font-size: 12px;
    line-height: 1.55;
}
.recaptcha-note i { color: var(--emerald); }
.quick-form-grid .recaptcha-note { grid-column: 1 / -1; }
@media screen and (max-width: 768px) {
    .recaptcha-note { align-items: flex-start; font-size: 11.5px; padding: 12px 13px; }
}


/* =========================================================
   REFINED COUNTRY CODE + PHONE FIELD LAYOUT
   ========================================================= */
.phone-field {
    display: grid !important;
    grid-template-columns: minmax(138px, 0.34fr) minmax(0, 1fr);
    gap: 0 !important;
    width: 100%;
    align-items: stretch;
}
.phone-field .country-code-select,
.form-group .phone-field .country-code-select,
.quick-form .phone-field .country-code-select {
    width: auto !important;
    min-width: 138px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 34px 0 14px !important;
    border: 1px solid rgba(17,17,17,.12) !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    background-color: rgba(255,255,255,.96) !important;
    color: #13231b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 48px !important;
    box-shadow: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.phone-field input,
.form-group .phone-field input,
.quick-form .phone-field input {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 15px !important;
    border-radius: 0 14px 14px 0 !important;
    border-left: 1px solid rgba(17,17,17,.06) !important;
}
.phone-field:focus-within .country-code-select,
.phone-field:focus-within input {
    border-color: var(--emerald) !important;
    box-shadow: 0 0 0 3px rgba(80, 200, 120, 0.10) !important;
}
.phone-field:focus-within .country-code-select { box-shadow: 0 0 0 3px rgba(80, 200, 120, 0.10) !important; }
.phone-field:focus-within input { box-shadow: 0 0 0 3px rgba(80, 200, 120, 0.10) !important; }
.quick-capture-grid {
    grid-template-columns: minmax(360px, 0.86fr) minmax(650px, 1.14fr);
}
.quick-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
    align-items: stretch;
}
.quick-form input,
.quick-form textarea,
.quick-form .recaptcha-note,
.quick-form .quick-submit {
    min-height: 48px !important;
}
.quick-form input,
.quick-form textarea {
    padding: 12px 16px !important;
    border-radius: 14px !important;
}
.quick-form textarea { height: 48px; min-height: 48px !important; }
.quick-form .phone-field { min-height: 48px !important; }
.quick-submit { min-height: 48px !important; padding: 12px 32px !important; }
.modal-container { max-width: 760px; }
#leadForm .phone-field { grid-template-columns: minmax(148px, 0.34fr) minmax(0, 1fr); }
#leadForm .phone-field .country-code-select,
#leadForm .phone-field input { height: 50px !important; min-height: 50px !important; }
@media (max-width: 992px) {
    .quick-capture-grid { grid-template-columns: 1fr !important; }
    .quick-form-grid { grid-template-columns: 1fr !important; }
    .phone-field { grid-template-columns: minmax(124px, 0.36fr) minmax(0, 1fr); }
    .phone-field .country-code-select,
    .form-group .phone-field .country-code-select,
    .quick-form .phone-field .country-code-select {
        min-width: 124px !important;
        font-size: 12px !important;
        padding-left: 10px !important;
        padding-right: 28px !important;
    }
}
@media (max-width: 480px) {
    .phone-field { grid-template-columns: minmax(112px, 0.38fr) minmax(0, 1fr); }
    .phone-field .country-code-select,
    .form-group .phone-field .country-code-select,
    .quick-form .phone-field .country-code-select {
        min-width: 112px !important;
        font-size: 11px !important;
    }
    #leadForm .phone-field { grid-template-columns: minmax(112px, 0.38fr) minmax(0, 1fr); }
}


/* =========================================================
   RELIABLE FLAG IMAGE COUNTRY PICKER
   Native select emojis can render as ISO letters on some systems,
   so this custom picker uses flag images while keeping the original
   select element for form submission.
   ========================================================= */
.phone-field { overflow: visible !important; }
.phone-field .country-code-select.country-native-hidden {
    display: none !important;
}
.phone-field .country-picker {
    position: relative;
    min-width: 154px;
    width: 154px;
    z-index: 20;
}
.phone-field .country-picker-toggle {
    width: 100%;
    height: 50px;
    min-height: 50px;
    border: 1px solid rgba(17,17,17,.13);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: rgba(255,255,255,.96);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #13231b;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer !important;
    box-shadow: none;
}
.phone-field .country-picker-toggle:focus-visible,
.phone-field .country-picker.open .country-picker-toggle {
    outline: none;
    border-color: var(--emerald, #50C878);
    box-shadow: 0 0 0 3px rgba(80,200,120,.12);
}
.phone-field .country-picker-flag {
    flex: 0 0 24px;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    background: #fff;
}
.phone-field .country-picker-fallback-flag {
    flex: 0 0 24px;
    width: 24px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: rgba(80,200,120,.12);
    color: #0a5a36;
    font-size: 10px;
    font-weight: 800;
}
.phone-field .country-picker-selected {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.phone-field .country-picker-caret {
    margin-left: auto;
    font-size: 10px;
    color: rgba(17,17,17,.64);
}
.phone-field .country-picker-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(380px, 84vw);
    max-height: 330px;
    overflow: hidden;
    display: none;
    background: #fff;
    border: 1px solid rgba(80,200,120,.24);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
    z-index: 40000;
}
.phone-field .country-picker.open .country-picker-menu { display: block; }
.phone-field .country-picker-search {
    width: calc(100% - 20px) !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 10px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(17,17,17,.12) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}
.phone-field .country-picker-list {
    max-height: 268px;
    overflow-y: auto;
    padding: 4px 6px 8px;
}
.phone-field .country-picker-option {
    width: 100%;
    min-height: 42px;
    border: 0;
    background: transparent;
    border-radius: 11px;
    display: grid;
    grid-template-columns: 26px 38px 58px 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #111;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer !important;
}
.phone-field .country-picker-option:hover,
.phone-field .country-picker-option.active {
    background: rgba(80,200,120,.13);
    color: #063d28;
}
.phone-field .country-picker-option .country-picker-dial {
    font-weight: 800;
    color: #0a5a36;
}
.phone-field .country-picker-option .country-picker-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.phone-field input[type="tel"],
.phone-field input[name="phone"],
.phone-field input[name="mobile"] {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 0 14px 14px 0 !important;
}
.phone-field:focus-within .country-picker-toggle,
.phone-field:focus-within input {
    border-color: var(--emerald, #50C878) !important;
}
@media (max-width: 600px) {
    .phone-field .country-picker {
        min-width: 126px;
        width: 126px;
    }
    .phone-field .country-picker-toggle {
        padding: 0 9px;
        gap: 6px;
        font-size: 12px;
    }
    .phone-field .country-picker-flag,
    .phone-field .country-picker-fallback-flag {
        width: 21px;
        height: 15px;
        flex-basis: 21px;
    }
    .phone-field .country-picker-menu {
        width: min(340px, 88vw);
    }
    .phone-field .country-picker-option {
        grid-template-columns: 24px 34px 56px 1fr;
        font-size: 12px;
    }
}


/* =========================================================
   SERVICES MENU HOVER STABILITY + LINKED DROPDOWN PATCH
   Keeps the desktop services dropdown open while moving from the nav item
   into the menu, and keeps mobile submenu behavior unchanged.
   ========================================================= */
@media (min-width: 993px) {
    header .services-nav-item {
        padding-bottom: 14px;
        margin-bottom: -14px;
    }

    header .services-nav-item .services-banner {
        top: calc(100% - 2px) !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto;
        visibility: hidden;
        opacity: 0;
    }

    header .services-nav-item:hover .services-banner,
    header .services-nav-item:focus-within .services-banner {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    header .services-nav-item .services-banner::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -18px;
        height: 18px;
        background: transparent;
    }
}

/* =========================================================
   PATCH: Portfolio section mobile display correction
   Keeps desktop design unchanged; removes the large blank mockup space on phones.
   ========================================================= */
@media screen and (max-width: 768px) {
    .portfolio-section {
        padding-top: 58px !important;
        padding-bottom: 74px !important;
        overflow: hidden !important;
    }

    .portfolio-showcase {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: left !important;
    }

    .portfolio-showcase .mockup-group {
        display: none !important;
    }

    .portfolio-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .portfolio-copy h2 {
        font-size: clamp(2.45rem, 13vw, 3.65rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.055em !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        text-wrap: balance;
    }

    .portfolio-copy h2 br {
        display: none !important;
    }

    .portfolio-copy h2 span {
        display: block !important;
        margin-top: 8px !important;
        font-size: clamp(2.25rem, 12vw, 3.3rem) !important;
        line-height: 1.02 !important;
    }

    .portfolio-copy p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
        margin-bottom: 26px !important;
        max-width: 96% !important;
    }

    .portfolio-copy .dual-action {
        margin-top: 10px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        gap: 14px !important;
    }

    .portfolio-copy .dual-action button,
    .portfolio-copy .dual-action a {
        min-height: 62px !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .portfolio-copy .dual-action .or {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 0 auto !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08) !important;
    }
}

@media screen and (max-width: 420px) {
    .portfolio-section {
        padding-top: 50px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .portfolio-copy h2 {
        font-size: clamp(2.35rem, 14vw, 3.25rem) !important;
    }

    .portfolio-copy h2 span {
        font-size: clamp(2.15rem, 13vw, 3.05rem) !important;
    }

    .portfolio-copy p {
        max-width: 100% !important;
    }
}


/* =========================================================
   PATCH: Portfolio mockup visibility on mobile
   Shows the laptop/phone mockup as a compact visual block above the portfolio text.
   ========================================================= */
@media screen and (max-width: 768px) {
    .portfolio-section {
        padding-top: 54px !important;
        padding-bottom: 76px !important;
        overflow: hidden !important;
    }

    .portfolio-showcase {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: left !important;
        align-items: stretch !important;
    }

    .portfolio-showcase .mockup-group {
        display: block !important;
        position: relative !important;
        order: 1 !important;
        width: 100% !important;
        height: 260px !important;
        max-width: 560px !important;
        margin: 0 auto 4px !important;
        overflow: visible !important;
    }

    .portfolio-showcase .laptop-mock {
        display: block !important;
        position: absolute !important;
        width: 92% !important;
        max-width: 520px !important;
        height: 210px !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        object-fit: cover !important;
        border-radius: 14px !important;
        border: 6px solid #333 !important;
        border-bottom-width: 10px !important;
        box-shadow: 0 18px 32px rgba(0,0,0,.28), 0 36px 58px rgba(0,0,0,.18) !important;
    }

    .portfolio-showcase .mobile-mock {
        display: block !important;
        position: absolute !important;
        width: 34% !important;
        max-width: 170px !important;
        height: 118px !important;
        right: 0 !important;
        bottom: 16px !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        border: 5px solid #111 !important;
        box-shadow: 0 16px 28px rgba(0,0,0,.28), 0 28px 42px rgba(0,0,0,.18) !important;
        z-index: 5 !important;
    }

    .portfolio-copy {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-showcase .mockup-group {
        height: 218px !important;
        margin-bottom: 0 !important;
    }

    .portfolio-showcase .laptop-mock {
        width: 94% !important;
        height: 176px !important;
        border-width: 5px !important;
        border-bottom-width: 8px !important;
    }

    .portfolio-showcase .mobile-mock {
        width: 36% !important;
        height: 100px !important;
        right: -2px !important;
        bottom: 12px !important;
        border-width: 4px !important;
        border-radius: 17px !important;
    }
}


/* MOBILE NAV WORD PADDING PATCH */
@media screen and (max-width: 992px) {
    header nav a,
    nav a { padding-left: 22px !important; padding-right: 18px !important; }
    nav a.active { box-shadow: inset 4px 0 0 rgba(80,200,120,.58) !important; }
    .service-column a { padding-left: 0 !important; }
}

/* =========================================================
   FINAL PATCH: Homepage mobile nav matches Contact/Newsroom
   and portfolio mockup appears before copy on mobile.
   ========================================================= */
@media screen and (max-width: 992px) {
    body.nav-lock { overflow: hidden !important; }

    header nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: min(88vw, 390px) !important;
        max-width: 390px !important;
        height: 100vh !important;
        transform: translateX(105%) !important;
        padding: 94px 24px 36px !important;
        background:
            radial-gradient(circle at 90% 0%, rgba(80,200,120,.18), transparent 34%),
            rgba(255,255,255,.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(80,200,120,.18) !important;
        box-shadow: -24px 0 60px rgba(0,0,0,.18) !important;
        z-index: 1001 !important;
        overflow-y: auto !important;
        transition: transform .42s cubic-bezier(.16,1,.3,1) !important;
    }

    header nav.nav-open { transform: translateX(0) !important; right: 0 !important; }

    header nav ul,
    nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    header nav .nav-item,
    .nav-item { display: block !important; width: 100% !important; }

    header nav a,
    nav a {
        width: 100% !important;
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 18px 14px 22px !important;
        border: 1px solid rgba(80,200,120,.12) !important;
        border-bottom: 1px solid rgba(80,200,120,.12) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.64) !important;
        color: #111 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    header nav a:hover,
    header nav a.active,
    nav a:hover,
    nav a.active {
        color: #013220 !important;
        background: rgba(80,200,120,.12) !important;
        border-color: rgba(80,200,120,.22) !important;
        box-shadow: inset 4px 0 0 rgba(80,200,120,.58) !important;
    }

    header nav ul li a::before { display: none !important; }

    .has-submenu::after {
        content: '+' !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        color: #50C878 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        transition: transform .25s ease !important;
    }

    .nav-item.submenu-open .has-submenu::after { transform: rotate(45deg) !important; }

    header .services-banner,
    .services-banner {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        visibility: visible !important;
        transition: max-height .32s ease, opacity .32s ease, margin .32s ease, padding .32s ease !important;
    }

    header .nav-item:hover .services-banner,
    .nav-item:hover .services-banner { display: grid !important; }

    header .nav-item.submenu-open .services-banner,
    .nav-item.submenu-open .services-banner {
        max-height: 520px !important;
        opacity: 1 !important;
        margin-top: 8px !important;
        padding: 12px 14px 14px !important;
        border: 1px solid rgba(80,200,120,.12) !important;
        border-radius: 14px !important;
        background: rgba(248,252,249,.84) !important;
    }

    .service-column { width: 100% !important; }
    .service-column h3 {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #50C878 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        margin: 0 0 10px !important;
        padding: 0 0 8px !important;
        border-bottom: 1px solid rgba(80,200,120,.12) !important;
    }

    .service-column a,
    header nav .service-column a,
    nav .service-column a {
        border: 0 !important;
        background: transparent !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        min-height: auto !important;
        padding: 9px 0 !important;
        display: block !important;
        color: #222 !important;
        text-transform: none !important;
        letter-spacing: .6px !important;
        font-size: 13px !important;
    }

    .service-column a:hover { color: #50C878 !important; transform: translateX(4px) !important; }
}

@media screen and (max-width: 768px) {
    .portfolio-section {
        padding-top: 52px !important;
        padding-bottom: 76px !important;
        overflow: hidden !important;
    }

    .portfolio-showcase {
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        align-items: stretch !important;
        text-align: left !important;
    }

    .portfolio-showcase .mockup-group {
        display: block !important;
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 640px !important;
        height: clamp(230px, 58vw, 370px) !important;
        min-height: 230px !important;
        margin: 0 auto 8px !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .portfolio-showcase .laptop-mock {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        width: 92% !important;
        max-width: 620px !important;
        height: clamp(180px, 46vw, 300px) !important;
        transform: translateY(-50%) !important;
        object-fit: cover !important;
        border: 6px solid #333 !important;
        border-bottom-width: 10px !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 34px rgba(0,0,0,.26), 0 38px 62px rgba(0,0,0,.18) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .portfolio-showcase .mobile-mock {
        display: block !important;
        position: absolute !important;
        right: 0 !important;
        bottom: 18px !important;
        width: 34% !important;
        max-width: 178px !important;
        height: clamp(96px, 25vw, 136px) !important;
        object-fit: cover !important;
        border: 5px solid #111 !important;
        border-radius: 20px !important;
        box-shadow: 0 16px 30px rgba(0,0,0,.28), 0 30px 46px rgba(0,0,0,.18) !important;
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .portfolio-copy {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-showcase { gap: 22px !important; }

    .portfolio-showcase .mockup-group {
        height: 222px !important;
        min-height: 222px !important;
        margin-bottom: 4px !important;
    }

    .portfolio-showcase .laptop-mock {
        width: 94% !important;
        height: 176px !important;
        border-width: 5px !important;
        border-bottom-width: 8px !important;
        border-radius: 14px !important;
    }

    .portfolio-showcase .mobile-mock {
        width: 36% !important;
        height: 100px !important;
        right: -2px !important;
        bottom: 14px !important;
        border-width: 4px !important;
        border-radius: 17px !important;
    }
}


/* Policy links for payment gateway verification */
.footer-legal-links { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 20px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); font-size:12px; color:rgba(255,255,255,0.78); }
.footer-legal-links a { color:rgba(255,255,255,0.78); text-decoration:none; }
.footer-legal-links a:hover { color:var(--emerald); }
@media(max-width: 768px) { .footer-legal-links { padding:18px 22px 0; justify-content:flex-start; } }

/* =========================================================
   ECOMMERCE PHASE 1: SHOP FOUNDATION
   ========================================================= */
.shop-body { background: #f7f8f7; }
.shop-hero { padding-top: 170px; text-align: center; background: radial-gradient(circle at top, rgba(80,200,120,.18), transparent 34%), #f7f8f7; }
.shop-hero .eyebrow, .product-detail-copy .eyebrow { display: inline-block; color: var(--emerald); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; margin-bottom: 18px; }
.shop-hero h1 { max-width: 980px; margin: 0 auto 22px; font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: .98; color: var(--ink); }
.shop-hero p { max-width: 760px; margin: 0 auto 32px; color: var(--text-light); font-size: 1.08rem; line-height: 1.85; }
.shop-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.shop-filter-card { max-width: 1050px; margin: 0 auto; padding: 18px; display: grid; grid-template-columns: 1fr 280px; gap: 14px; box-shadow: 0 20px 45px rgba(0,0,0,.1); }
.shop-filter-card input, .shop-filter-card select { width: 100%; border: 1px solid rgba(80,200,120,.2); border-radius: 999px; padding: 16px 22px; font-size: 15px; background: rgba(255,255,255,.86); color: var(--ink); outline: none; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.shop-loading, .shop-empty { grid-column: 1 / -1; text-align: center; padding: 60px 28px; color: var(--text-light); }
.shop-empty h2 { font-family: 'Playfair Display', serif; font-size: 2.4rem; color: var(--ink); margin-bottom: 12px; }
.shop-product-card { background: rgba(255,255,255,.88); border: 1px solid rgba(80,200,120,.18); border-radius: 26px; overflow: hidden; box-shadow: 0 24px 44px rgba(0,0,0,.08); display: flex; flex-direction: column; min-height: 100%; }
.shop-product-media { display: block; height: 245px; overflow: hidden; background: #e9eee9; }
.shop-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.shop-product-card:hover .shop-product-media img { transform: scale(1.06); }
.shop-product-content { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.shop-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.shop-badge { display:inline-flex; padding: 7px 11px; border-radius: 999px; background: rgba(80,200,120,.12); color: #0a5a36; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.shop-badge.featured { background: linear-gradient(135deg, rgba(80,200,120,.22), rgba(1,50,32,.12)); }
.shop-product-content h2 { font-size: 1.35rem; line-height: 1.3; color: var(--ink); margin-bottom: 12px; }
.shop-product-content p { color: var(--text-light); line-height: 1.75; font-size: .95rem; margin-bottom: 22px; }
.shop-product-meta { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: var(--text-light); font-size: 12px; }
.shop-price span { display: inline-block; font-size: 1.45rem; font-weight: 900; color: var(--emerald-deep); }
.shop-price small { display:block; text-decoration: line-through; color:#999; margin-top: 2px; }
.shop-card-cta { margin-top: 22px; color: var(--emerald-deep); font-weight: 800; letter-spacing: .5px; display:inline-flex; align-items:center; gap:8px; }
.product-detail-wrap { padding-top: 170px; }
.product-detail-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 55px; align-items: center; }
.product-detail-media { padding: 14px; border-radius: 32px; box-shadow: 0 34px 80px rgba(0,0,0,.18); }
.product-detail-media img { width: 100%; height: min(540px, 55vw); object-fit: cover; border-radius: 22px; display:block; }
.product-detail-copy h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.7rem, 5.5vw, 5.2rem); line-height: 1; color: var(--ink); margin-bottom: 18px; }
.product-lead { color: var(--text-light); font-size: 1.08rem; line-height: 1.85; margin-bottom: 24px; }
.product-detail-price { display:flex; align-items: baseline; gap:14px; margin: 18px 0 22px; }
.product-detail-price span { font-size: 2.4rem; color: var(--emerald-deep); font-weight: 900; }
.product-detail-price small { text-decoration: line-through; color:#999; font-size:1.2rem; }
.product-info-pills { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 28px; }
.product-info-pills span { padding:10px 14px; border-radius:999px; background: rgba(80,200,120,.12); color:#0a5a36; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
.product-actions { display:flex; flex-wrap:wrap; gap:14px; }
.product-description { margin-top: 65px; padding: 42px; box-shadow: 0 24px 45px rgba(0,0,0,.08); }
.product-description h2, .product-description h3 { font-family:'Playfair Display',serif; color: var(--ink); margin-bottom: 18px; }
.product-description p { color: var(--text-light); line-height: 1.9; margin-bottom: 28px; }
.product-description ul { list-style:none; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.product-description li { background:rgba(80,200,120,.08); border:1px solid rgba(80,200,120,.16); border-radius:14px; padding:12px 14px; color:#245c3b; font-weight:600; }
.product-description li i { color:var(--emerald); margin-right:8px; }

@media screen and (max-width: 992px) {
    .shop-hero { padding-top: 145px; }
    .shop-filter-card { grid-template-columns: 1fr; border-radius: 22px; }
    .shop-grid { grid-template-columns: 1fr; }
    .shop-product-media { height: 230px; }
    .product-detail-grid { grid-template-columns: 1fr; gap: 30px; }
    .product-detail-wrap { padding-top: 145px; }
    .product-detail-media img { height: 280px; }
    .product-description { padding: 28px; margin-top: 38px; }
    .product-description ul { grid-template-columns: 1fr; }
    .product-actions .magnetic-btn { width: 100%; }
}

@media screen and (max-width: 600px) {
    .shop-hero h1 { font-size: 3rem; }
    .shop-hero p { font-size: .98rem; }
    .shop-product-content { padding: 22px; }
    .product-detail-copy h1 { font-size: 3rem; }
    .product-detail-price span { font-size: 2rem; }
}


/* Shop/Product cursor safety fallback: prevents invisible pointer if custom cursor script is blocked */
.native-cursor-fallback,
.native-cursor-fallback * {
    cursor: auto !important;
}
.native-cursor-fallback .cursor-dot,
.native-cursor-fallback .cursor-ring,
.native-cursor-fallback .cursor-glow {
    display: none !important;
}

/* =========================================================
   ECOMMERCE PHASE 2 — CART, CHECKOUT & CUSTOMER ACCOUNT
   ========================================================= */
.ecom-page { background: radial-gradient(circle at top, rgba(80,200,120,.12), transparent 34%), #f7f8f7; }
.ecom-shell { padding-top: 155px; }
.ecom-hero { text-align:center; max-width: 980px; margin:0 auto 42px; }
.ecom-hero .eyebrow { display:inline-block; color:var(--emerald); font-weight:800; letter-spacing:2px; text-transform:uppercase; font-size:12px; margin-bottom:16px; }
.ecom-hero h1 { font-family:'Playfair Display', serif; color:var(--ink); font-size:clamp(2.7rem, 5.4vw, 5rem); line-height:1; margin-bottom:18px; }
.ecom-hero p { color:var(--text-light); font-size:1rem; line-height:1.8; max-width:740px; margin:0 auto; }
.ecom-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.42fr); gap:28px; align-items:start; }
.ecom-card { background:rgba(255,255,255,.9); border:1px solid rgba(80,200,120,.2); border-radius:24px; padding:28px; box-shadow:0 24px 54px rgba(0,0,0,.08); }
.cart-item { display:grid; grid-template-columns:110px minmax(0,1fr) auto; gap:18px; padding:18px 0; border-bottom:1px solid rgba(17,17,17,.08); align-items:center; }
.cart-item:last-child { border-bottom:0; }
.cart-item img { width:110px; height:78px; object-fit:cover; border-radius:16px; background:#e9eee9; }
.cart-item h3 { color:var(--ink); font-size:1.05rem; margin-bottom:6px; }
.cart-item p { color:var(--text-light); font-size:.85rem; }
.cart-actions-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qty-control { display:inline-flex; border:1px solid rgba(80,200,120,.3); border-radius:999px; overflow:hidden; align-items:center; background:#fff; }
.qty-control button { border:0; background:transparent; width:34px; height:34px; font-weight:800; cursor:pointer; }
.qty-control span { min-width:34px; text-align:center; font-weight:700; }
.cart-remove { border:0; background:rgba(220,53,69,.08); color:#b42334; border-radius:999px; padding:9px 13px; font-weight:700; cursor:pointer; }
.summary-row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid rgba(17,17,17,.08); color:var(--text-light); }
.summary-row strong { color:var(--ink); }
.summary-row.total { border-bottom:0; font-size:1.25rem; color:var(--ink); font-weight:900; }
.ecom-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.ecom-form-grid .full { grid-column:1/-1; }
.ecom-field label { display:block; font-size:11px; color:var(--emerald-deep); text-transform:uppercase; letter-spacing:1px; font-weight:800; margin-bottom:8px; }
.ecom-field input, .ecom-field textarea, .ecom-field select { width:100%; border:1px solid rgba(17,17,17,.12); border-radius:14px; background:rgba(255,255,255,.9); min-height:50px; padding:13px 15px; font-family:'Poppins',sans-serif; font-size:14px; color:var(--text-dark); outline:none; }
.ecom-field textarea { min-height:110px; resize:vertical; }
.ecom-field input:focus, .ecom-field textarea:focus, .ecom-field select:focus { border-color:var(--emerald); box-shadow:0 0 0 4px rgba(80,200,120,.12); }
.ecom-auth-tabs { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.ecom-auth-tabs button { border:1px solid rgba(80,200,120,.3); background:#fff; border-radius:999px; padding:10px 18px; cursor:pointer; font-weight:800; }
.ecom-auth-tabs button.active { background:var(--emerald); color:#fff; border-color:var(--emerald); }
.ecom-alert { padding:14px 16px; border-radius:14px; margin:16px 0; background:rgba(80,200,120,.1); color:#245c3b; border:1px solid rgba(80,200,120,.22); line-height:1.6; }
.ecom-alert.error { background:rgba(220,53,69,.08); color:#9f1d2d; border-color:rgba(220,53,69,.2); }
.ecom-muted { color:var(--text-light); font-size:.9rem; line-height:1.7; }
.ecom-status-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 11px; background:rgba(80,200,120,.12); color:#0a5a36; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.order-card { border:1px solid rgba(80,200,120,.18); border-radius:20px; padding:20px; margin-bottom:16px; background:#fff; }
.order-card h3 { color:var(--ink); margin-bottom:8px; }
.order-meta-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:14px; }
.order-meta-grid div { background:#f7faf8; border-radius:14px; padding:12px; font-size:12px; color:var(--text-light); }
.order-meta-grid strong { display:block; color:var(--ink); margin-top:4px; font-size:14px; }
.ecom-empty { text-align:center; padding:50px 24px; }
.ecom-link-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }
.cart-nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 6px; border-radius:999px; background:var(--emerald); color:#fff; font-size:11px; font-weight:900; margin-left:7px; }
.google-placeholder { border:1px dashed rgba(80,200,120,.55); background:rgba(80,200,120,.08); padding:13px 15px; border-radius:14px; color:#245c3b; line-height:1.6; }
@media (max-width: 992px) {
    .ecom-shell { padding-top: 135px; }
    .ecom-grid { grid-template-columns:1fr; }
    .ecom-form-grid { grid-template-columns:1fr; }
    .cart-item { grid-template-columns:86px 1fr; }
    .cart-item img { width:86px; height:70px; }
    .cart-actions-row { grid-column:1/-1; }
    .order-meta-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) {
    .ecom-card { padding:20px; border-radius:20px; }
    .order-meta-grid { grid-template-columns:1fr; }
}


/* =========================================
PHASE 2 POLISH: CUSTOMER GOOGLE LOGIN + SHOP CTAS
========================================= */
.google-login-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(80, 200, 120, 0.22);
    background:
        radial-gradient(circle at 8% 20%, rgba(80, 200, 120, 0.14), transparent 30%),
        rgba(255, 255, 255, 0.86);
    border-radius: 22px;
    padding: 18px;
    margin: 18px 0 24px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.06);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease;
}
.google-login-panel::before {
    content: '';
    position: absolute;
    inset: -80% auto auto -25%;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(80, 200, 120, 0.18);
    filter: blur(16px);
    transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
    opacity: .75;
}
.google-login-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(80, 200, 120, 0.44);
    box-shadow: 0 26px 66px rgba(0,0,0,0.10);
}
.google-login-panel:hover::before { transform: translate(36px, 18px) scale(1.12); opacity: 1; }
.google-login-status,
.google-login-ready {
    position: relative;
    z-index: 1;
}
.google-login-status {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--emerald-deep);
}
.google-login-status > i,
.google-login-copy > i {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #4285F4;
    font-size: 23px;
    box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}
.google-login-status strong,
.google-login-copy strong {
    display: block;
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: 3px;
}
.google-login-status span,
.google-login-copy span,
.google-login-ready small {
    display: block;
    color: var(--text-light);
    font-size: .78rem;
    line-height: 1.55;
}
.google-login-status.warning { color: #9f5800; }
.google-login-status.warning > i { color: #ea4335; }
.google-login-status.muted { color: var(--text-light); }
.google-login-ready {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 360px);
    gap: 16px;
    align-items: center;
}
.google-login-copy {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.google-native-slot {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.08));
    transition: transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
.google-login-panel:hover .google-native-slot {
    transform: translateX(-2px) scale(1.015);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,0.12));
}
.google-login-ready small {
    grid-column: 1 / -1;
    padding-top: 4px;
    color: rgba(5, 64, 42, 0.72);
}
.shop-card-cta,
.growth-cta,
.package-cta {
    text-decoration: none;
}
.shop-add-cart-btn,
.shop-card-cta.shop-add-cart-btn {
    border: 0;
    min-height: 46px;
    padding: 13px 20px;
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, #8de23f 0%, #50C878 45%, #04b9a9 100%);
    box-shadow: 0 18px 34px rgba(80, 200, 120, 0.22);
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: .76rem;
    cursor: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.shop-add-cart-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    transform: translateX(-120%);
    transition: transform .55s cubic-bezier(.16,1,.3,1);
    z-index: -1;
}
.shop-add-cart-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 44px rgba(80, 200, 120, 0.32);
}
.shop-add-cart-btn:hover::before { transform: translateX(120%); }
.growth-cta {
    margin-top: auto;
    min-height: 50px;
    border-radius: 999px;
    padding: 14px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #8de23f 0%, #50C878 48%, #04b9a9 100%);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 18px 36px rgba(80, 200, 120, .18);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, filter .32s ease;
}
.growth-cta:hover,
.package-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 54px rgba(80, 200, 120, .28);
    filter: saturate(1.08);
}
.ecom-auth-tabs button,
.google-login-panel,
.shop-add-cart-btn,
.growth-cta,
.package-cta {
    cursor: none;
}
.native-cursor-fallback .ecom-auth-tabs button,
.native-cursor-fallback .google-login-panel,
.native-cursor-fallback .shop-add-cart-btn,
.native-cursor-fallback .growth-cta,
.native-cursor-fallback .package-cta {
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .google-login-ready { grid-template-columns: 1fr; }
    .google-native-slot { justify-content: stretch; }
    .google-native-slot > div { width: 100% !important; }
    .google-login-panel { padding: 15px; border-radius: 18px; }
    .shop-add-cart-btn { width: 100%; }
}


/* =========================================
   CUSTOMER DASHBOARD — ORGANIC PREMIUM POLISH
========================================= */
.customer-dashboard-shell {
    background:
        radial-gradient(circle at 12% 10%, rgba(80, 200, 120, 0.16), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(4, 185, 169, 0.10), transparent 28%),
        linear-gradient(180deg, #f7faf8 0%, #f1f5f2 100%);
    min-height: 100vh;
    overflow: hidden;
}
.customer-dashboard-hero {
    position: relative;
    padding-top: 165px;
    padding-bottom: 55px;
}
.dashboard-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(3px);
    opacity: .9;
}
.dashboard-orb-one {
    width: 280px;
    height: 280px;
    left: -90px;
    top: 130px;
    background: radial-gradient(circle, rgba(80,200,120,.18), transparent 68%);
}
.dashboard-orb-two {
    width: 340px;
    height: 340px;
    right: -120px;
    top: 80px;
    background: radial-gradient(circle, rgba(4,185,169,.14), transparent 70%);
}
.dashboard-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 34px;
    align-items: stretch;
}
.dashboard-hero-copy,
.dashboard-profile-preview,
.dashboard-panel {
    border: 1px solid rgba(80, 200, 120, 0.20);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 28px 70px rgba(0,0,0,.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.dashboard-hero-copy {
    border-radius: 34px;
    padding: clamp(30px, 5vw, 58px);
    position: relative;
    overflow: hidden;
}
.dashboard-hero-copy::after {
    content: '';
    position: absolute;
    width: 44%;
    height: 120px;
    right: -60px;
    bottom: -46px;
    border-radius: 50% 50% 0 0;
    background: rgba(80,200,120,.09);
}
.dashboard-eyebrow,
.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald-deep);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.dashboard-eyebrow i { color: var(--emerald); }
.dashboard-hero-copy h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 7vw, 6.7rem);
    line-height: .95;
    color: var(--ink);
    max-width: 760px;
    margin: 18px 0 18px;
    letter-spacing: -2px;
}
.dashboard-hero-copy p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.85;
    max-width: 710px;
}
.dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}
.dashboard-stat-card {
    border-radius: 24px;
    padding: 19px 18px;
    background:
        radial-gradient(circle at top left, rgba(80,200,120,.16), transparent 42%),
        rgba(255,255,255,.78);
    border: 1px solid rgba(80,200,120,.16);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.dashboard-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px rgba(80,200,120,.15);
    border-color: rgba(80,200,120,.38);
}
.dashboard-stat-card small,
.dashboard-stat-card span {
    display: block;
    color: var(--text-light);
    font-size: .76rem;
    line-height: 1.35;
}
.dashboard-stat-card small {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: var(--emerald-deep);
    margin-bottom: 10px;
}
.dashboard-stat-card strong {
    display: block;
    color: var(--ink);
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    line-height: 1;
    margin-bottom: 9px;
}
.dashboard-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.dashboard-pill-cta,
.dashboard-small-link {
    text-decoration: none;
}
.dashboard-pill-cta {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #8de23f 0%, #50C878 48%, #04b9a9 100%);
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: .76rem;
    box-shadow: 0 20px 40px rgba(80,200,120,.22);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, filter .32s ease;
}
.dashboard-pill-cta.outline {
    color: var(--emerald-deep);
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(80,200,120,.28);
}
.dashboard-pill-cta:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 28px 58px rgba(80,200,120,.30);
    filter: saturate(1.08);
}
.dashboard-profile-preview {
    border-radius: 34px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.dashboard-profile-preview::before {
    content: '';
    position: absolute;
    inset: auto -60px -90px auto;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(80,200,120,.12);
}
.profile-preview-ring {
    width: 112px;
    height: 112px;
    border-radius: 34px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(80,200,120,.24), rgba(4,185,169,.10));
    margin-bottom: 24px;
}
.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--emerald-deep);
    font-size: 2.2rem;
    box-shadow: 0 18px 36px rgba(0,0,0,.08);
}
.preview-label {
    color: var(--emerald);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}
.dashboard-profile-preview h2 {
    font-size: 1.7rem;
    color: var(--ink);
    margin: 8px 0 6px;
}
.dashboard-profile-preview p {
    color: var(--text-light);
    overflow-wrap: anywhere;
}
.preview-trust-row {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}
.preview-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--emerald-deep);
    background: rgba(80,200,120,.10);
    border: 1px solid rgba(80,200,120,.16);
    border-radius: 999px;
    padding: 10px 13px;
    font-size: .82rem;
    font-weight: 700;
}
.dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    gap: 28px;
    align-items: start;
    padding-top: 18px;
}
.dashboard-panel {
    border-radius: 30px;
    padding: clamp(22px, 3vw, 34px);
}
.dashboard-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}
.dashboard-panel-head.compact { margin-bottom: 18px; }
.dashboard-panel-head h2 {
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    font-size: clamp(2rem, 3vw, 3.1rem);
    line-height: 1;
    margin-top: 8px;
}
.dashboard-small-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald-deep);
    font-weight: 800;
    font-size: .86rem;
}
.dashboard-orders-list {
    display: grid;
    gap: 16px;
}
.dashboard-order-card {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(80,200,120,.16);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 18px 38px rgba(0,0,0,.055);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .32s ease;
}
.dashboard-order-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(0,0,0,.09);
    border-color: rgba(80,200,120,.34);
}
.order-card-top {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}
.order-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(80,200,120,.12);
    color: var(--emerald-deep);
    font-size: 1.25rem;
}
.order-card-top h3 {
    color: var(--ink);
    margin: 4px 0 4px;
    font-size: 1.08rem;
}
.order-card-top p {
    color: var(--text-light);
    font-size: .88rem;
    line-height: 1.55;
}
.order-card-top > strong {
    color: var(--emerald-deep);
    font-size: 1.08rem;
    white-space: nowrap;
}
.dashboard-progress-line {
    height: 8px;
    border-radius: 999px;
    background: rgba(80,200,120,.12);
    margin: 18px 0 14px;
    overflow: hidden;
}
.dashboard-progress-line span {
    display: block;
    width: 44%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8de23f, #50C878, #04b9a9);
}
.dashboard-order-meta {
    margin-top: 0;
}
.dashboard-profile-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.dashboard-phone-row {
    display: grid;
    grid-template-columns: minmax(110px, .45fr) minmax(0, 1fr);
    gap: 12px;
}
.dashboard-profile-form .ecom-field input,
.dashboard-profile-form .ecom-field textarea {
    border-radius: 18px;
    background: rgba(255,255,255,.86);
}
.dashboard-profile-form .ecom-field textarea {
    min-height: 86px;
}
.dashboard-form-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}
.dashboard-save-btn {
    width: 100%;
    border: 0;
}
.dashboard-logout-btn {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(220,53,69,.18);
    background: rgba(220,53,69,.07);
    color: #9f1d2d;
    font-weight: 900;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .25s ease, background .25s ease;
}
.dashboard-logout-btn:hover {
    transform: translateY(-2px);
    background: rgba(220,53,69,.11);
}
.dashboard-empty-state {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed rgba(80,200,120,.35);
    border-radius: 26px;
    background: rgba(80,200,120,.055);
}
.dashboard-empty-state > div {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--emerald-deep);
    background: #fff;
    box-shadow: 0 18px 34px rgba(0,0,0,.07);
    font-size: 1.65rem;
}
.dashboard-empty-state h3 {
    color: var(--ink);
    margin-bottom: 8px;
}
.dashboard-empty-state p {
    color: var(--text-light);
    max-width: 520px;
    margin: 0 auto 20px;
    line-height: 1.7;
}
.dashboard-pill-cta,
.dashboard-small-link,
.dashboard-stat-card,
.dashboard-panel,
.dashboard-order-card,
.dashboard-logout-btn {
    cursor: none;
}
.native-cursor-fallback .dashboard-pill-cta,
.native-cursor-fallback .dashboard-small-link,
.native-cursor-fallback .dashboard-stat-card,
.native-cursor-fallback .dashboard-panel,
.native-cursor-fallback .dashboard-order-card,
.native-cursor-fallback .dashboard-logout-btn {
    cursor: pointer !important;
}
@media (max-width: 1100px) {
    .dashboard-hero-grid,
    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-profile-preview {
        min-height: auto;
    }
}
@media (max-width: 768px) {
    .customer-dashboard-hero {
        padding-top: 118px;
        padding-bottom: 28px;
    }
    .dashboard-hero-copy,
    .dashboard-profile-preview,
    .dashboard-panel {
        border-radius: 24px;
    }
    .dashboard-stat-row {
        grid-template-columns: 1fr;
    }
    .dashboard-content-grid {
        padding-top: 8px;
    }
    .dashboard-panel-head {
        flex-direction: column;
    }
    .order-card-top {
        grid-template-columns: 52px 1fr;
    }
    .order-card-top > strong {
        grid-column: 1 / -1;
        justify-self: start;
        padding-left: 68px;
    }
    .dashboard-phone-row,
    .dashboard-form-actions {
        grid-template-columns: 1fr;
    }
    .dashboard-pill-cta {
        width: 100%;
    }
}

/* Ecommerce active navigation state fix: Cart and Account */
.ecom-page header nav ul li a.active {
    color: var(--emerald-dark) !important;
}
.ecom-page header nav ul li a.active::before {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    animation: none !important;
}
@media (max-width: 992px) {
    .ecom-page header nav ul li a.active::before {
        display: none !important;
    }
    .ecom-page header nav a.active,
    .ecom-page nav a.active {
        color: #013220 !important;
        background: rgba(80, 200, 120, .12) !important;
        border-color: rgba(80, 200, 120, .22) !important;
        box-shadow: inset 4px 0 0 rgba(80, 200, 120, .58) !important;
        padding-left: 22px !important;
    }
}


/* =========================================
   CART INLINE FEEDBACK — NO BROWSER POPUP
========================================= */
.cart-inline-feedback {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 12px;
    padding: 0 2px;
    color: var(--emerald-deep);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), max-height .28s ease;
}
.cart-inline-feedback.show {
    opacity: 1;
    transform: translateY(0);
    max-height: 56px;
}
.cart-inline-feedback i {
    color: var(--emerald);
    filter: drop-shadow(0 6px 12px rgba(80, 200, 120, .24));
}
.cart-inline-feedback a {
    margin-left: auto;
    color: var(--emerald-deep);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: .8rem;
    font-weight: 900;
    white-space: nowrap;
}
.shop-add-cart-btn.is-added,
.product-actions .magnetic-btn.is-added {
    background: linear-gradient(135deg, #50C878 0%, #04b9a9 100%) !important;
    transform: translateY(-2px) scale(1.01);
}
.shop-add-cart-btn.is-added i,
.product-actions .magnetic-btn.is-added i {
    margin-right: 6px;
}
@media (max-width: 768px) {
    .cart-inline-feedback { font-size: .82rem; }
    .cart-inline-feedback a { margin-left: 0; }
}

/* Phase 4 invoice actions */
.dashboard-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.dashboard-mini-btn {
  border: 1px solid rgba(80, 200, 120, 0.34);
  background: rgba(255, 255, 255, 0.66);
  color: #00452e;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.dashboard-mini-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 80, 42, .12);
  background: rgba(234, 255, 241, .95);
}
.dashboard-mini-btn.filled {
  border: 0;
  background: linear-gradient(135deg, #8ee43c, #08bcae);
  color: #fff;
}
.admin-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.admin-invoice-actions button {
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(80, 200, 120, .35);
  background: #f7fff9;
  color: #00452e;
  font-weight: 800;
  cursor: pointer;
}
.admin-invoice-actions button:hover { background: #e8fff0; }


/* Customer order cancellation controls */
.dashboard-mini-btn.danger {
  border: 0;
  background: linear-gradient(135deg, #ff6b6b, #cf2e4f);
  color: #fff;
  box-shadow: 0 12px 24px rgba(207, 46, 79, .18);
}
.dashboard-mini-btn.danger:hover {
  background: linear-gradient(135deg, #ff7777, #bb1f40);
  box-shadow: 0 18px 34px rgba(207, 46, 79, .24);
}
.dashboard-cancel-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  color: #6f5540;
  background: rgba(255, 244, 225, .84);
  border: 1px solid rgba(230, 184, 92, .36);
  padding: 8px 12px;
  border-radius: 999px;
}
.dashboard-cancel-note.cancelled {
  color: #8c1d2e;
  background: rgba(255, 230, 234, .86);
  border-color: rgba(207, 46, 79, .25);
}
.dashboard-cancel-note.muted {
  color: #617064;
  background: rgba(242, 247, 244, .9);
  border-color: rgba(80, 200, 120, .18);
}
.admin-cancel-box {
  background: rgba(255, 239, 224, .9);
  border: 1px solid rgba(255, 152, 67, .28);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  color: #66350f;
  font-size: 12px;
  line-height: 1.5;
}
.admin-cancel-box strong { color: #9a3d00; }


/* Premium in-dashboard cancellation modal */
body.modal-open { overflow: hidden; }
.dashboard-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 22, 16, .58);
  backdrop-filter: blur(18px);
}
.dashboard-modal-backdrop.active { display: flex; animation: modalFadeIn .24s ease forwards; }
.dashboard-modal-card {
  position: relative;
  width: min(560px, 100%);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235, 252, 244, .94));
  border: 1px solid rgba(80, 200, 120, .28);
  border-radius: 34px;
  padding: clamp(26px, 4vw, 42px);
  box-shadow: 0 40px 90px rgba(0, 42, 29, .28);
  transform: translateY(16px) scale(.98);
  animation: modalSlideUp .28s cubic-bezier(.2,.8,.2,1) forwards;
  overflow: hidden;
}
.dashboard-modal-card::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(80,200,120,.32), transparent 68%);
}
.dashboard-modal-close {
  position: absolute;
  right: 20px;
  top: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(0,70,46,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  color: #00452e;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.dashboard-modal-close:hover { transform: rotate(90deg); background: #eafff2; }
.dashboard-modal-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b, #50c878);
  box-shadow: 0 18px 42px rgba(80, 200, 120, .24);
  margin-bottom: 18px;
  font-size: 1.4rem;
}
.dashboard-modal-card h2 {
  font-family: 'Playfair Display', serif;
  color: #171544;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 6px 0 10px;
}
.dashboard-modal-card p { color: #59615d; line-height: 1.75; margin-bottom: 18px; }
.dashboard-modal-card label {
  display: block;
  font-weight: 900;
  color: #00452e;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: 10px;
}
.dashboard-modal-card textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid rgba(80, 200, 120, .24);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  padding: 18px 20px;
  font: inherit;
  color: #1f1f2e;
  outline: none;
  transition: border .25s ease, box-shadow .25s ease, background .25s ease;
}
.dashboard-modal-card textarea:focus {
  border-color: rgba(80, 200, 120, .72);
  box-shadow: 0 0 0 6px rgba(80, 200, 120, .1);
  background: #fff;
}
.dashboard-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.dashboard-modal-message {
  min-height: 22px;
  margin-top: 12px;
  font-weight: 800;
  color: #617064;
}
.dashboard-modal-message.success { color: #00874f; }
.dashboard-modal-message.error { color: #cf2e4f; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalSlideUp { to { transform: translateY(0) scale(1); } }
@media (max-width: 640px) {
  .dashboard-modal-card { border-radius: 26px; }
  .dashboard-modal-actions { flex-direction: column-reverse; }
  .dashboard-modal-actions .dashboard-mini-btn { width: 100%; justify-content: center; }
}


/* =========================================================
   WEBSITE PACKAGE CONFIGURATOR + UPDATE REQUESTS
   ========================================================= */
.package-configurator{margin:34px auto;padding:34px;position:relative;overflow:hidden;}
.package-configurator::before{content:'';position:absolute;right:-80px;top:-120px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(80,200,120,.24),transparent 68%);pointer-events:none;}
.package-config-head{position:relative;max-width:860px;margin-bottom:24px;}
.package-config-head h2{font-family:'Playfair Display',serif;font-size:2.35rem;color:var(--ink);margin:8px 0 10px;}
.package-config-head p{color:var(--text-light);line-height:1.8;}
.package-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 28px;}
.package-feature-card{background:rgba(255,255,255,.78);border:1px solid rgba(80,200,120,.2);border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(0,40,20,.08);display:grid;gap:7px;transition:.3s ease;}
.package-feature-card:hover{transform:translateY(-4px);border-color:rgba(80,200,120,.5);box-shadow:0 20px 45px rgba(0,40,20,.13);}
.package-feature-card i{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#9af05c,#07b7a8);display:grid;place-items:center;color:white;}
.package-feature-card strong{font-size:14px;color:var(--ink);}.package-feature-card span{font-size:12px;color:var(--text-light);line-height:1.55;}
.package-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.package-option-field label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;color:#0f5638;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}.package-option-field label small{font-weight:600;color:#7b8a84;text-transform:none;letter-spacing:0;}
.package-option-field select{width:100%;height:48px;border:1px solid rgba(80,200,120,.28);border-radius:15px;padding:0 14px;background:rgba(255,255,255,.88);font-weight:700;color:#17233b;outline:none;}
.package-addon-toggle{border:1px solid rgba(80,200,120,.28);border-radius:18px;background:rgba(255,255,255,.75);padding:13px 15px;display:flex;align-items:center;gap:12px;cursor:pointer;grid-column:span 2;transition:.25s ease;}.package-addon-toggle:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(0,40,20,.1);}.package-addon-toggle input{accent-color:var(--emerald);width:18px;height:18px;}.package-addon-toggle span{display:grid;gap:4px}.package-addon-toggle small{color:#68756f}.package-addon-toggle i{color:var(--emerald);margin-right:7px;}
.email-benefit-panel{margin-top:18px;border-radius:20px;background:linear-gradient(135deg,rgba(80,200,120,.10),rgba(255,255,255,.85));border:1px solid rgba(80,200,120,.24);padding:18px;}.email-benefit-title{display:flex;align-items:center;gap:12px;margin-bottom:10px}.email-benefit-title i{color:var(--emerald);font-size:20px}.email-benefit-title strong{flex:1;color:var(--ink)}.email-benefit-title span{font-weight:900;color:#075032}.email-benefit-panel ul{columns:2;margin:0;padding-left:18px;color:#53615a;font-size:12px;line-height:1.7;}
.package-inclusion-note{margin-top:18px;border:1px dashed rgba(80,200,120,.38);border-radius:18px;padding:16px;background:rgba(255,255,255,.56);}.package-inclusion-note ul{margin:0;padding-left:18px;line-height:1.8;color:#46564f;font-size:13px;}
.package-total-card{margin-top:18px;border-radius:22px;background:linear-gradient(135deg,#073f2a,#0c6b45);color:white;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 22px 48px rgba(0,60,35,.22);}.package-total-card span{font-size:12px;text-transform:uppercase;letter-spacing:.15em;opacity:.82}.package-total-card strong{font-size:2rem}.package-total-card small{max-width:460px;line-height:1.55;opacity:.8;text-align:right;}
.cart-option-summary{margin:8px 0 0;padding:9px 11px;border-radius:12px;background:rgba(80,200,120,.08);border:1px solid rgba(80,200,120,.18);list-style:none;display:grid;gap:5px;font-size:12px;}.cart-option-summary li{display:flex;justify-content:space-between;gap:12px;color:#52615b;}.cart-option-summary strong{color:#173d2d}.cart-option-summary.compact{font-size:12px;color:#52615b;line-height:1.55;}
.admin-option-list{margin:7px 0 0 14px;padding:0;color:#5d6964;font-size:11px;line-height:1.6;}.admin-update-box{margin:0 0 10px;padding:10px;border-radius:10px;background:#fff8e7;border:1px solid #ffdf90;color:#5f4300;display:grid;gap:4px}.admin-update-box small{display:block;color:#6d5a25}.dashboard-update-list{margin:12px 0 0;padding:12px;border-radius:16px;background:rgba(80,200,120,.08);border:1px solid rgba(80,200,120,.18);display:grid;gap:6px;font-size:12px;color:#4d5a55}.dashboard-update-list span{display:block}.dashboard-update-note{display:block;margin-top:10px;color:#6f7a76}.dashboard-modal-message.success{background:rgba(80,200,120,.12);border-color:rgba(80,200,120,.32);color:#155b35}.dashboard-modal-message.error{background:rgba(220,53,69,.09);border-color:rgba(220,53,69,.28);color:#8b1e2d}
@media(max-width:900px){.package-feature-grid,.package-config-grid{grid-template-columns:1fr}.package-addon-toggle{grid-column:auto}.email-benefit-panel ul{columns:1}.package-total-card{display:block}.package-total-card strong{display:block;margin:8px 0}.package-total-card small{text-align:left;display:block}.package-configurator{padding:24px}.package-config-head h2{font-size:1.85rem}}


/* =========================================================
   PREMIUM ORGANIC ECOMMERCE OVERHAUL + ORIGINAL COLOR ICONS
   ========================================================= */
:root {
    --nexus-mint: #dff7ea;
    --nexus-aqua: #00b7a8;
    --nexus-lime: #a3e635;
    --nexus-sky: #38bdf8;
    --nexus-violet: #7c3aed;
    --nexus-gold: #f4b740;
}
.shop-body,
.ecom-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(80,200,120,.18), transparent 32%),
        radial-gradient(circle at 86% 20%, rgba(0,183,168,.13), transparent 28%),
        linear-gradient(180deg, #f8faf8 0%, #eef5f1 52%, #f8faf8 100%) !important;
}
.shop-body::before,
.ecom-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 18% 32%, rgba(80,200,120,.06) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 72%, rgba(0,183,168,.05) 0 1px, transparent 2px);
    background-size: 120px 120px, 160px 160px;
    opacity: .8;
    z-index: -1;
}
.shop-hero,
.product-detail-wrap,
.ecom-shell {
    position: relative;
}
.shop-product-card,
.product-detail-media,
.product-description,
.package-configurator,
.ecom-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.93), rgba(244,251,247,.82)) !important;
    border-color: rgba(80,200,120,.24) !important;
    box-shadow: 0 28px 75px rgba(3, 35, 24, .10) !important;
}
.shop-product-card {
    position: relative;
    isolation: isolate;
    border-radius: 30px !important;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.shop-product-card::after {
    content:'';
    position:absolute;
    inset:auto 0 0;
    height:5px;
    background:linear-gradient(90deg,var(--nexus-lime),var(--emerald),var(--nexus-aqua));
    opacity:.85;
    z-index:1;
}
.shop-product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(80,200,120,.48) !important;
    box-shadow: 0 38px 90px rgba(3,35,24,.16) !important;
}
.shop-product-media { border-bottom: 1px solid rgba(80,200,120,.18); }
.shop-filter-card input:focus,
.shop-filter-card select:focus,
.package-option-field select:focus,
.ecom-card input:focus,
.ecom-card textarea:focus,
.ecom-card select:focus {
    border-color: rgba(80,200,120,.68) !important;
    box-shadow: 0 0 0 5px rgba(80,200,120,.12) !important;
}
.shop-card-cta.shop-add-cart-btn,
.shop-card-cta.shop-configure-btn,
.product-actions .magnetic-btn,
.ecom-card .magnetic-btn {
    background: linear-gradient(135deg, #94e844 0%, #50C878 46%, #06b6a6 100%) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 18px 38px rgba(80,200,120,.28) !important;
}
.shop-card-cta.shop-add-cart-btn:hover,
.shop-card-cta.shop-configure-btn:hover,
.product-actions .magnetic-btn:hover,
.ecom-card .magnetic-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 28px 58px rgba(80,200,120,.38) !important;
}
.shop-configure-btn.is-routing { opacity: .84; pointer-events: none; }
.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 32px rgba(0,40,20,.10), inset 0 0 0 1px rgba(255,255,255,.7);
    position: relative;
    overflow: hidden;
}
.brand-icon::before {
    content:'';
    position:absolute;
    inset:-55%;
    background: radial-gradient(circle, rgba(255,255,255,.65), transparent 58%);
    transform: translate(-24%, -24%);
}
.brand-icon svg { width: 34px; height: 34px; display:block; position: relative; z-index: 1; }
.premium-icon-grid { gap: 18px !important; }
.package-feature-card.premium-icon-card {
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 7px 14px !important;
    padding: 20px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at top left, rgba(80,200,120,.13), transparent 48%),
        rgba(255,255,255,.86) !important;
}
.package-feature-card.premium-icon-card .brand-icon { grid-row: span 2; }
.package-feature-card.premium-icon-card i { background: none !important; width: auto !important; height: auto !important; color: inherit !important; }
.package-feature-card.premium-icon-card strong { font-size: 15px !important; letter-spacing: -.01em; }
.package-feature-card.premium-icon-card span { font-size: 12.5px !important; }
.email-benefit-title.premium-email-title .brand-icon { width:42px; height:42px; border-radius:15px; flex:0 0 auto; }
.email-benefit-title.premium-email-title .brand-icon svg { width:30px; height:30px; }
.package-configurator {
    border-radius: 32px !important;
    background:
        radial-gradient(circle at 92% 4%, rgba(0,183,168,.16), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(234,247,240,.82)) !important;
}
.package-total-card {
    background:
        radial-gradient(circle at 20% 10%, rgba(163,230,53,.28), transparent 26%),
        linear-gradient(135deg, #052e22, #087047 62%, #05a99d) !important;
    border: 1px solid rgba(255,255,255,.18);
}
.admin-selected-addons,
.cart-option-summary {
    background: linear-gradient(135deg, rgba(80,200,120,.12), rgba(255,255,255,.84)) !important;
    border-color: rgba(80,200,120,.28) !important;
}
@media(max-width: 900px) {
    .package-feature-card.premium-icon-card { grid-template-columns: 48px 1fr; }
    .brand-icon { width: 44px; height: 44px; border-radius: 16px; }
    .brand-icon svg { width: 30px; height: 30px; }
}


/* === Nexus final premium organic polish layer === */
.home-brand-icon,
.brand-growth-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    color: #fff !important;
    box-shadow: 0 18px 42px rgba(8,48,30,.12), inset 0 0 0 1px rgba(255,255,255,.35) !important;
    position: relative;
    overflow: hidden;
}
.home-brand-icon::after,
.brand-growth-icon::after {
    content:'';
    position:absolute;
    inset:-55%;
    background:radial-gradient(circle, rgba(255,255,255,.72), transparent 58%);
    transform:translate(-24%,-24%);
}
.home-brand-icon i,
.brand-growth-icon i { position: relative; z-index: 1; font-size: 20px !important; color: #fff !important; }
.icon-leaf { background: linear-gradient(135deg,#8be843,#14b87a) !important; }
.icon-layers { background: linear-gradient(135deg,#50C878,#06b6a6) !important; }
.icon-control { background: linear-gradient(135deg,#0ea5e9,#22c55e) !important; }
.icon-cart { background: linear-gradient(135deg,#10b981,#059669) !important; }
.icon-google-map { background: conic-gradient(from 45deg,#4285f4,#34a853,#fbbc05,#ea4335,#4285f4) !important; }
.icon-whatsapp { background: linear-gradient(135deg,#25D366,#128C7E) !important; }
.icon-card { background: linear-gradient(135deg,#f97316,#f59e0b) !important; }
.icon-facebook { background: linear-gradient(135deg,#1877F2,#0b5bd3) !important; }
.icon-google { background: conic-gradient(from 0deg,#4285f4,#34a853,#fbbc05,#ea4335,#4285f4) !important; }
.pricing-card,
.growth-card,
.shop-product-card,
.product-detail-card,
.package-configurator,
.ecom-card {
    position: relative;
    overflow: hidden;
}
.pricing-card::before,
.growth-card::before,
.shop-product-card::before,
.product-detail-card::before,
.ecom-card::before {
    content:'';
    position:absolute;
    width: 210px;
    height: 210px;
    right: -96px;
    top: -98px;
    background: radial-gradient(circle, rgba(80,200,120,.15), transparent 64%);
    pointer-events:none;
}
.shop-card-cta.shop-configure-btn {
    text-align:center;
    text-decoration:none !important;
    cursor:pointer;
}
.shop-card-cta.shop-configure-btn:active { transform: translateY(-2px) scale(.99); }
.admin-order-product-line,
.admin-cart-product-line {
    padding: 10px 0;
    border-bottom: 1px solid rgba(80,200,120,.14);
}
.admin-order-product-line:last-child,
.admin-cart-product-line:last-child { border-bottom: 0; }
.admin-selected-addons {
    margin-top: 10px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at top left, rgba(80,200,120,.16), transparent 38%),
        linear-gradient(135deg, rgba(232,250,241,.92), rgba(255,255,255,.88)) !important;
    border: 1px solid rgba(80,200,120,.28) !important;
    box-shadow: 0 12px 28px rgba(8,48,30,.06) !important;
}
.admin-addon-title {
    display:flex;
    align-items:center;
    gap:8px;
    color:#075c3e;
    margin-bottom:8px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.admin-addon-title i { color:#50C878; }
.admin-selected-addons ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.admin-selected-addons li { display:grid; grid-template-columns: 1fr 1.1fr auto; gap:8px; align-items:center; font-size:12px; }
.admin-selected-addons li span { color:#66736d; }
.admin-selected-addons li strong { color:#152c26; }
.admin-selected-addons li em { color:#0b7a4f; font-style:normal; font-weight:700; }
.admin-addon-summary { margin:0 0 8px; color:#53615a; font-size:12px; line-height:1.55; }
.brand-icon-whatsapp,
.brand-icon-fa-whatsapp,
.brand-icon-generic.brand-icon-whatsapp {
    background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(18,140,126,.18)) !important;
}
.brand-icon-generic.brand-icon-whatsapp i { color: #25D366 !important; font-family: 'Font Awesome 6 Brands' !important; }
@media(max-width: 768px) {
    .home-brand-icon,
    .brand-growth-icon { width: 44px !important; height: 44px !important; border-radius: 16px !important; }
    .admin-selected-addons li { grid-template-columns: 1fr; gap: 2px; }
}


/* =========================================================
   CUSTOMER ACCOUNT MOBILE GOOGLE SIGN-IN WIDTH FIX
   Keeps Google one-tap/sign-in card inside mobile padding.
   ========================================================= */
.customer-login-mobile-fix-anchor { display: none; }
.google-login-ready,
.google-login-copy,
.google-login-status,
.google-native-slot {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.google-login-copy > div,
.google-login-status > div {
    min-width: 0;
    max-width: 100%;
}
.google-login-copy strong,
.google-login-copy span,
.google-login-status strong,
.google-login-status span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
.google-native-slot {
    overflow: hidden;
}
.google-native-slot iframe,
.google-native-slot > div {
    max-width: 100% !important;
}
@media (max-width: 768px) {
    .ecom-shell {
        width: 100%;
        overflow-x: hidden;
    }
    .ecom-shell > .ecom-card {
        width: min(100%, 680px);
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
    .google-login-panel {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 16px;
        box-sizing: border-box;
    }
    .google-login-ready {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        width: 100%;
    }
    .google-login-copy {
        width: 100%;
        align-items: flex-start;
    }
    .google-login-copy > i,
    .google-login-status > i {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
    }
    .google-native-slot {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 420px) {
    .ecom-shell > .ecom-card {
        max-width: calc(100vw - 24px) !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .google-login-panel {
        padding: 14px;
        border-radius: 20px;
    }
    .google-login-copy,
    .google-login-status {
        gap: 12px;
    }
    .google-login-copy > i,
    .google-login-status > i {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 15px;
        font-size: 21px;
    }
    .google-login-copy strong {
        font-size: .92rem;
        line-height: 1.28;
    }
    .google-login-copy span {
        font-size: .74rem;
        line-height: 1.42;
    }
}


/* =========================================================
   CUSTOMER ACCOUNT GOOGLE BUTTON MOBILE HARD FIX v2
   Prevents the Google personalized button from clipping on small screens.
   ========================================================= */
.google-native-slot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.google-native-slot > div,
.google-native-slot iframe {
    width: min(100%, var(--google-btn-width, 300px)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 768px) {
    .google-login-ready {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }
    .google-native-slot {
        justify-content: center !important;
        overflow: hidden !important;
        padding: 0 1px;
    }
    .google-native-slot > div,
    .google-native-slot iframe {
        width: min(100%, 300px) !important;
    }
}
@media (max-width: 390px) {
    .google-login-panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .google-native-slot > div,
    .google-native-slot iframe {
        width: min(100%, 276px) !important;
    }
}


/* =========================================================
   CUSTOMER ACCOUNT GOOGLE MOBILE FINAL FIX v4
   The native personalized Google iframe has a fixed internal width on
   some phones. Render it as a safe Google icon button on mobile so it
   never clips outside the account card.
   ========================================================= */
@media (max-width: 768px) {
    .google-login-ready {
        grid-template-columns: minmax(0, 1fr) 58px !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .google-login-copy {
        min-width: 0 !important;
    }
    .google-login-copy strong,
    .google-login-copy span {
        overflow-wrap: anywhere !important;
    }
    .google-native-slot.google-native-icon-mode {
        width: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        justify-content: center !important;
        overflow: visible !important;
        padding: 0 !important;
        justify-self: end !important;
    }
    .google-native-slot.google-native-icon-mode > div,
    .google-native-slot.google-native-icon-mode iframe {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
        height: 44px !important;
        overflow: visible !important;
    }
}
@media (max-width: 430px) {
    .google-login-ready {
        grid-template-columns: minmax(0, 1fr) 56px !important;
        gap: 10px !important;
    }
    .google-login-panel {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
@media (max-width: 360px) {
    .google-login-ready {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .google-native-slot.google-native-icon-mode {
        justify-self: start !important;
    }
}


/* Customer Support Desk */
.dashboard-support-panel{grid-column:1 / -1;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(232,249,239,.78));border:1px solid rgba(80,200,120,.18);box-shadow:0 26px 80px rgba(5,61,43,.08)}
.dashboard-support-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:24px;align-items:start}
.dashboard-support-form,.dashboard-support-thread-wrap{background:rgba(255,255,255,.72);border:1px solid rgba(80,200,120,.16);border-radius:26px;padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.dashboard-support-form{display:grid;gap:14px}.support-submit{width:100%;justify-content:center}.support-thread-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.support-thread-head h3{font-size:1.1rem;color:var(--ink);margin:0}.dashboard-support-list{display:grid;gap:14px;max-height:640px;overflow:auto;padding-right:4px}.support-ticket-card{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(242,252,246,.86));border:1px solid rgba(80,200,120,.18);border-radius:22px;padding:18px;box-shadow:0 18px 46px rgba(5,61,43,.07)}.support-ticket-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.support-ticket-top h3{margin:5px 0;color:var(--ink);font-size:1.08rem}.support-ticket-top p{color:#6b756f;font-size:.9rem;margin:0}.support-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 12px;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;background:rgba(80,200,120,.12);color:#07543c;white-space:nowrap}.support-status.closed{background:rgba(20,20,20,.08);color:#555}.support-status.open{background:rgba(255,193,7,.12);color:#7a4c00}.support-status.answered{background:rgba(80,200,120,.16);color:#07543c}.support-status.waiting_customer{background:rgba(0,191,174,.12);color:#006c65}.support-message-stack{display:grid;gap:10px;margin:15px 0}.support-message{border-radius:18px;padding:12px 14px;background:rgba(255,255,255,.8);border:1px solid rgba(80,200,120,.12)}.support-message.admin{background:rgba(80,200,120,.10)}.support-message>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.support-message strong{font-size:.82rem;color:var(--emerald-deep)}.support-message small{font-size:.75rem;color:#7d8580}.support-message p{margin:0;line-height:1.55;color:#3b435c}.support-reply-form{display:flex;gap:10px;margin-top:10px}.support-reply-form input{flex:1;border:1px solid rgba(80,200,120,.2);border-radius:16px;padding:13px 14px;background:#fff;font:inherit}.support-reply-form button{width:48px;border:0;border-radius:16px;background:linear-gradient(135deg,#8ff23f,#11c4ad);color:#fff;cursor:pointer}.dashboard-empty-state.compact{padding:24px}.dashboard-empty-state.compact h3{font-size:1.2rem}
@media(max-width:980px){.dashboard-support-grid{grid-template-columns:1fr}.support-ticket-top,.support-thread-head{flex-direction:column;align-items:flex-start}.dashboard-support-form,.dashboard-support-thread-wrap{padding:18px}}

/* =========================================================
   PREMIUM ORGANIC 3D NEEDS SECTION UPDATE
   ========================================================= */
.needs-section.needs-premium {
    padding: clamp(72px, 8vw, 118px) clamp(18px, 7vw, 110px) clamp(78px, 8vw, 132px) !important;
    background:
        radial-gradient(circle at 15% 8%, rgba(143, 244, 180, .28), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(28, 202, 179, .18), transparent 32%),
        linear-gradient(180deg, #f8fffb 0%, #eef9f3 52%, #f9fffb 100%) !important;
    overflow: hidden !important;
    isolation: isolate;
}
.needs-section.needs-premium::before {
    opacity: .36 !important;
    background-image:
        linear-gradient(120deg, transparent 0 14%, rgba(80,200,120,.08) 14.1%, transparent 14.35%),
        linear-gradient(0deg, transparent 0 12%, rgba(23,21,63,.035) 12.1%, transparent 12.25%) !important;
    background-size: 420px 260px !important;
}
.needs-section.needs-premium::after {
    content: '';
    position: absolute;
    width: min(860px, 70vw);
    height: min(860px, 70vw);
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80,200,120,.11), rgba(80,200,120,.04) 38%, transparent 68%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}
.needs-organic-bg,
.needs-orb {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.needs-orb {
    width: 260px;
    height: 260px;
    border-radius: 44% 56% 63% 37% / 42% 48% 52% 58%;
    background: linear-gradient(135deg, rgba(80,200,120,.22), rgba(10,145,115,.08));
    filter: blur(2px);
    opacity: .65;
    animation: organicFloat 12s ease-in-out infinite;
}
.needs-orb-one { left: -80px; top: 150px; }
.needs-orb-two { right: -90px; top: 120px; animation-delay: -4s; }
.needs-orb-three { width: 190px; height: 190px; right: 18%; bottom: 20px; animation-delay: -8s; opacity: .42; }
@keyframes organicFloat {
    0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 44% 56% 63% 37% / 42% 48% 52% 58%; }
    50% { transform: translate3d(18px,-22px,0) rotate(8deg) scale(1.06); border-radius: 58% 42% 41% 59% / 54% 34% 66% 46%; }
}
.needs-title-wrap {
    text-align: center !important;
    max-width: 1120px !important;
    margin-bottom: clamp(34px, 5vw, 64px) !important;
}
.needs-title-wrap .section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(80,200,120,.22);
    box-shadow: 0 18px 42px rgba(80,200,120,.10);
    color: var(--emerald-dark);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.needs-title-wrap .section-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8cf04d, #0fc7b4);
    box-shadow: 0 0 0 8px rgba(80,200,120,.12);
}
.needs-section.needs-premium .section-title h2 {
    color: var(--ink) !important;
    font-size: clamp(2.4rem, 5.7vw, 5.4rem) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
}
.needs-section.needs-premium .section-title h2 span {
    display: block !important;
    margin-top: 10px;
    color: var(--emerald) !important;
    font-size: clamp(2.25rem, 5.3vw, 5.1rem) !important;
    font-style: italic !important;
    text-shadow: 0 18px 42px rgba(80,200,120,.16) !important;
}
.needs-section.needs-premium .section-title p {
    max-width: 860px !important;
    color: rgba(32,38,34,.72) !important;
    font-size: clamp(.95rem, 1.25vw, 1.08rem) !important;
    line-height: 1.85 !important;
}
.needs-3d-stage {
    width: min(1200px, 100%) !important;
    height: 640px !important;
    margin: 0 auto !important;
    position: relative !important;
    perspective: 1400px;
    transform-style: preserve-3d;
    transform: none !important;
}
.needs-stage-backplate {
    position: absolute;
    inset: 52px 54px 38px;
    border-radius: 54px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(235,250,241,.62)),
        radial-gradient(circle at 50% 52%, rgba(80,200,120,.12), transparent 48%);
    border: 1px solid rgba(80,200,120,.16);
    box-shadow:
        0 46px 110px rgba(13,44,32,.12),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -26px 55px rgba(80,200,120,.05);
    transform: rotateX(54deg) translateZ(-58px) scale(.94);
    transform-origin: center;
    filter: blur(.1px);
    z-index: 1;
}
.needs-depth-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(58deg);
    border-radius: 50%;
    border: 1px solid rgba(80,200,120,.18);
    box-shadow: inset 0 0 42px rgba(80,200,120,.08), 0 24px 70px rgba(80,200,120,.08);
    z-index: 1;
    pointer-events: none;
}
.needs-depth-ring.ring-one { width: 570px; height: 570px; }
.needs-depth-ring.ring-two { width: 810px; height: 810px; opacity: .5; }
.needs-3d-stage .needs-connector-svg { z-index: 3 !important; filter: drop-shadow(0 18px 30px rgba(80,200,120,.08)); }
.needs-3d-stage .need-line-base { stroke: rgba(20, 58, 44, .14) !important; stroke-width: 3 !important; stroke-dasharray: 7 13 !important; }
.needs-3d-stage .need-line-active { stroke: url(#needGradient); stroke: var(--emerald) !important; stroke-width: 4 !important; filter: drop-shadow(0 0 14px rgba(80,200,120,.65)) !important; }
.needs-3d-stage .needs-hub-wrap {
    width: 252px !important;
    height: 218px !important;
    filter: drop-shadow(0 34px 48px rgba(14,70,45,.22));
    transform: translate(-50%, -50%) translateZ(60px) !important;
}
.needs-3d-stage .needs-hub-wrap:hover { transform: translate(-50%, -50%) translateZ(86px) scale(1.05) !important; }
.needs-3d-stage .needs-hub-wrap::before {
    bottom: -30px !important;
    width: 92% !important;
    height: 34px !important;
    background: radial-gradient(closest-side, rgba(2,93,58,.5), rgba(80,200,120,.42) 46%, transparent 78%) !important;
    filter: blur(5px);
}
.needs-3d-stage .needs-hub {
    background: linear-gradient(135deg, rgba(80,200,120,.82), rgba(18,193,170,.48)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 26px 50px rgba(80,200,120,.16);
}
.needs-3d-stage .needs-hub-inner {
    inset: 4px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.96), rgba(255,255,255,.8) 42%, rgba(238,255,245,.88) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 -18px 42px rgba(80,200,120,.08);
}
.needs-3d-stage .needs-hub-inner img { width: 78px !important; filter: drop-shadow(0 12px 18px rgba(80,200,120,.22)) !important; }
.needs-3d-stage .needs-hub-content { font-size: 15px !important; letter-spacing: .02em; }
.needs-3d-stage .needs-hub-content span { font-size: 24px !important; }
.needs-3d-stage .needs-hub-content small {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(4,64,42,.66);
    font-family: 'Poppins', sans-serif;
    font-style: normal;
}
.needs-3d-stage .need-petal {
    width: 112px !important;
    height: 97px !important;
    filter: drop-shadow(0 28px 32px rgba(16, 78, 52, .16)) !important;
}
.needs-3d-stage .need-petal::before {
    bottom: -20px !important;
    height: 22px !important;
    background: radial-gradient(closest-side, rgba(3,91,58,.42), rgba(80,200,120,.48) 54%, transparent 82%) !important;
    filter: blur(4px);
}
.needs-3d-stage .need-petal-inner {
    background: linear-gradient(135deg, rgba(80,200,120,.68), rgba(19,192,171,.36)) !important;
    box-shadow: 0 18px 32px rgba(80,200,120,.13), inset 0 1px 0 rgba(255,255,255,.78);
}
.needs-3d-stage .need-petal-inner::after {
    inset: 3px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,255,247,.82)) !important;
}
.needs-3d-stage .need-petal i {
    font-size: 30px !important;
    color: var(--emerald) !important;
    filter: drop-shadow(0 8px 12px rgba(80,200,120,.18));
}
.needs-3d-stage .need-petal:hover .need-petal-inner::after,
.needs-3d-stage .need-petal.active .need-petal-inner::after {
    background: linear-gradient(135deg, #7ff047, #10c4b5) !important;
}
.needs-3d-stage .need-petal:hover i,
.needs-3d-stage .need-petal.active i { color: #fff !important; }
.needs-3d-stage .need-node {
    width: 332px !important;
    min-height: 178px;
    padding: 20px 22px 18px !important;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(241,255,247,.72)),
        radial-gradient(circle at 0 0, rgba(80,200,120,.14), transparent 42%) !important;
    border: 1px solid rgba(80,200,120,.20) !important;
    box-shadow:
        0 28px 70px rgba(14,54,38,.12),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -18px 42px rgba(80,200,120,.04) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: hidden;
}
.needs-3d-stage .need-node::before {
    content: '';
    position: absolute;
    inset: auto -15% -46% 24%;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(80,200,120,.18), transparent 76%);
    transform: rotate(-8deg);
    pointer-events: none;
}
.needs-3d-stage .need-node::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 18px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #85f13e, #0fc7b4);
    box-shadow: 0 0 0 8px rgba(80,200,120,.1);
    opacity: .78;
}
.needs-3d-stage .need-node:hover,
.needs-3d-stage .need-node.active {
    transform: var(--base-trans) translateY(-9px) translateZ(50px) !important;
    border-color: rgba(80,200,120,.42) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(231,255,241,.9)) !important;
    box-shadow: 0 36px 88px rgba(14,54,38,.16), 0 0 0 1px rgba(80,200,120,.12) !important;
}
.needs-3d-stage .node-num {
    font-size: 3.75rem !important;
    line-height: .9 !important;
    letter-spacing: -.08em !important;
    color: transparent !important;
    background: linear-gradient(135deg, #81ef42, #14c3af) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    text-shadow: none !important;
    filter: drop-shadow(0 16px 24px rgba(80,200,120,.16)) !important;
}
.needs-3d-stage .node-text {
    margin-top: 8px !important;
    color: #123b2a !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    letter-spacing: -.015em;
}
.needs-3d-stage .node-detail {
    display: block;
    margin-top: 12px;
    color: rgba(28,40,34,.64);
    font-size: .78rem;
    line-height: 1.65;
    font-weight: 500;
}
.needs-3d-stage .node-01 { left: 120px !important; top: 204px !important; }
.needs-3d-stage .node-02 { left: 170px !important; top: 390px !important; }
.needs-3d-stage .node-03 { left: 430px !important; top: 575px !important; }
.needs-3d-stage .node-04 { left: 770px !important; top: 575px !important; }
.needs-3d-stage .node-05 { left: 1030px !important; top: 390px !important; }
.needs-3d-stage .node-06 { left: 1080px !important; top: 204px !important; }

@media screen and (max-width: 1180px) {
    .needs-3d-stage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        perspective: none !important;
    }
    .needs-stage-backplate,
    .needs-depth-ring,
    .needs-3d-stage .needs-connector-svg,
    .needs-3d-stage .need-petal,
    .needs-3d-stage .needs-hub-wrap {
        display: none !important;
    }
    .needs-3d-stage .need-node {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-height: 206px !important;
        transform: none !important;
        border-radius: 28px !important;
    }
    .needs-3d-stage .need-node:hover,
    .needs-3d-stage .need-node.active {
        transform: translateY(-6px) !important;
    }
}

@media screen and (max-width: 760px) {
    .needs-section.needs-premium {
        padding: 64px 16px 70px !important;
    }
    .needs-title-wrap .section-eyebrow {
        width: 100%;
        max-width: 330px;
        font-size: .62rem;
        letter-spacing: .16em;
        padding: 9px 12px;
    }
    .needs-section.needs-premium .section-title h2,
    .needs-section.needs-premium .section-title h2 span {
        font-size: clamp(2.15rem, 11vw, 3.35rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.06em !important;
    }
    .needs-section.needs-premium .section-title p {
        font-size: .9rem !important;
        line-height: 1.75 !important;
    }
    .needs-3d-stage {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    .needs-3d-stage .need-node {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas: "num title" "detail detail" !important;
        column-gap: 15px !important;
        min-height: 0 !important;
        padding: 18px 18px 17px !important;
        border-radius: 25px !important;
    }
    .needs-3d-stage .node-num {
        grid-area: num;
        font-size: 2.35rem !important;
        margin: 0 !important;
        align-self: center;
    }
    .needs-3d-stage .node-text {
        grid-area: title;
        margin: 0 !important;
        font-size: .98rem !important;
        align-self: center;
    }
    .needs-3d-stage .node-detail {
        grid-area: detail;
        margin-top: 10px !important;
        font-size: .78rem !important;
    }
}

@media screen and (max-width: 420px) {
    .needs-section.needs-premium {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .needs-3d-stage .need-node {
        padding: 16px 15px !important;
        column-gap: 12px !important;
    }
    .needs-3d-stage .node-num { font-size: 2.05rem !important; }
    .needs-3d-stage .node-text { font-size: .9rem !important; }
    .needs-3d-stage .node-detail { font-size: .74rem !important; }
}


/* === Needs Section Premium 3D Fix Patch === */

/* =========================================================
   NEXUS NEEDS SECTION REPAIR
   Latest baseline: May 25 premium 3D needs-section
   Purpose:
   - Fix desktop overlap/clipping
   - Convert hexagon petals/hub to rounded organic shapes
   - Remove green under-icon shadows
   - Add darker soft 3D shadows behind shapes
   - Preserve responsive grid behavior on tablet/mobile
   ========================================================= */

.needs-section.needs-premium {
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 118px !important;
}

.needs-section.needs-premium .section-title {
    position: relative !important;
    z-index: 4 !important;
}

/* Wider, safer desktop canvas so cards no longer clip at the left/right/bottom edges. */
.needs-section.needs-premium .needs-3d-stage {
    width: min(1260px, calc(100vw - 64px)) !important;
    height: 720px !important;
    min-height: 720px !important;
    margin: 36px auto 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
    perspective: 1400px !important;
    transform-style: preserve-3d !important;
}

/* Keep decorative layers safely behind the active shapes. */
.needs-section.needs-premium .needs-stage-backplate,
.needs-section.needs-premium .needs-depth-ring,
.needs-section.needs-premium .needs-connector-svg {
    pointer-events: none !important;
}

.needs-section.needs-premium .needs-stage-backplate {
    inset: 52px 130px 68px !important;
    border-radius: 48% 52% 45% 55% / 48% 42% 58% 52% !important;
    opacity: .9 !important;
    filter: drop-shadow(0 42px 72px rgba(5, 24, 17, .16)) !important;
}

.needs-section.needs-premium .needs-depth-ring {
    opacity: .54 !important;
    filter: drop-shadow(0 30px 58px rgba(5, 24, 17, .18)) !important;
}

/* Rounded organic center shape instead of a hard hexagon. */
.needs-section.needs-premium .needs-hub-wrap {
    overflow: visible !important;
    filter:
        drop-shadow(0 34px 42px rgba(5, 24, 17, .28))
        drop-shadow(0 72px 86px rgba(5, 24, 17, .18)) !important;
}

.needs-section.needs-premium .needs-hub-wrap::before {
    bottom: -32px !important;
    width: 88% !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: radial-gradient(closest-side, rgba(4, 18, 13, .34), rgba(4, 18, 13, .14) 58%, transparent 82%) !important;
    filter: blur(12px) !important;
    opacity: .72 !important;
}

.needs-section.needs-premium .needs-hub,
.needs-section.needs-premium .needs-hub-inner {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: 42% 58% 47% 53% / 48% 42% 58% 52% !important;
}

.needs-section.needs-premium .needs-hub {
    background:
        linear-gradient(145deg, rgba(80, 200, 120, .78), rgba(16, 196, 181, .48)),
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.88), transparent 34%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -26px 42px rgba(1,50,32,.12),
        0 32px 58px rgba(5,24,17,.22) !important;
}

.needs-section.needs-premium .needs-hub-inner {
    inset: 5px !important;
    background:
        radial-gradient(circle at 38% 16%, rgba(255,255,255,.98), rgba(255,255,255,.72) 44%, rgba(237,255,246,.9) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -18px 34px rgba(7, 67, 44, .08) !important;
}

.needs-section.needs-premium .needs-hub-inner img {
    filter: drop-shadow(0 14px 20px rgba(5, 24, 17, .18)) !important;
}

/* Rounded organic petals instead of hexagons. */
.needs-section.needs-premium .need-petal {
    width: 112px !important;
    height: 112px !important;
    overflow: visible !important;
    border-radius: 34% 42% 36% 46% / 40% 34% 48% 38% !important;
    filter:
        drop-shadow(0 28px 34px rgba(5, 24, 17, .28))
        drop-shadow(0 58px 62px rgba(5, 24, 17, .16)) !important;
    transform: translate(-50%, -50%) translateZ(34px) rotate(var(--shape-tilt, 0deg)) !important;
    transition:
        transform .34s cubic-bezier(.16,1,.3,1),
        filter .34s ease !important;
}

.needs-section.needs-premium .petal-1 { --shape-tilt: -7deg; }
.needs-section.needs-premium .petal-2 { --shape-tilt: 5deg; }
.needs-section.needs-premium .petal-3 { --shape-tilt: -4deg; }
.needs-section.needs-premium .petal-4 { --shape-tilt: 4deg; }
.needs-section.needs-premium .petal-5 { --shape-tilt: -5deg; }
.needs-section.needs-premium .petal-6 { --shape-tilt: 7deg; }

.needs-section.needs-premium .need-petal::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -24px !important;
    width: 82% !important;
    height: 26px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: radial-gradient(closest-side, rgba(5, 18, 13, .32), rgba(5, 18, 13, .13) 58%, transparent 84%) !important;
    filter: blur(11px) !important;
    opacity: .68 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.needs-section.needs-premium .need-petal-inner,
.needs-section.needs-premium .need-petal-inner::after {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    border-radius: inherit !important;
}

.needs-section.needs-premium .need-petal-inner {
    background:
        linear-gradient(145deg, rgba(80,200,120,.58), rgba(17,190,172,.36)),
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.92), transparent 42%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -18px 28px rgba(1,50,32,.08),
        0 18px 30px rgba(5,24,17,.14) !important;
}

.needs-section.needs-premium .need-petal-inner::after {
    inset: 4px !important;
    background:
        radial-gradient(circle at 34% 18%, rgba(255,255,255,.98), rgba(255,255,255,.76) 46%, rgba(241,255,247,.92) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 0 -12px 22px rgba(7, 67, 44, .06) !important;
}

.needs-section.needs-premium .need-petal i {
    color: var(--emerald) !important;
    filter: none !important;
    text-shadow: none !important;
}

.needs-section.needs-premium .need-petal:hover,
.needs-section.needs-premium .need-petal.active {
    transform: translate(-50%, -50%) translateZ(58px) rotate(var(--shape-tilt, 0deg)) scale(1.055) !important;
    filter:
        drop-shadow(0 32px 38px rgba(5, 24, 17, .34))
        drop-shadow(0 72px 78px rgba(5, 24, 17, .20)) !important;
}

.needs-section.needs-premium .need-petal:hover::before,
.needs-section.needs-premium .need-petal.active::before {
    width: 90% !important;
    height: 30px !important;
    bottom: -28px !important;
    opacity: .78 !important;
    background: radial-gradient(closest-side, rgba(5, 18, 13, .38), rgba(5, 18, 13, .16) 60%, transparent 84%) !important;
}

.needs-section.needs-premium .need-petal:hover .need-petal-inner::after,
.needs-section.needs-premium .need-petal.active .need-petal-inner::after {
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(233,255,242,.86)),
        radial-gradient(circle at 28% 16%, rgba(255,255,255,.98), transparent 40%) !important;
}

.needs-section.needs-premium .need-petal:hover i,
.needs-section.needs-premium .need-petal.active i {
    color: var(--emerald-dark) !important;
    filter: none !important;
    transform: scale(1.08) rotate(-3deg) !important;
}

/* Safer card sizing and positions: no edge clipping, no visual collisions. */
.needs-section.needs-premium .needs-3d-stage .need-node {
    width: 300px !important;
    min-height: 166px !important;
    padding: 19px 20px 17px !important;
    overflow: visible !important;
    border-radius: 31px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(242,255,248,.78)),
        radial-gradient(circle at 0 0, rgba(80,200,120,.12), transparent 44%) !important;
    box-shadow:
        0 30px 54px rgba(5,24,17,.16),
        0 64px 88px rgba(5,24,17,.10),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -18px 36px rgba(1,50,32,.045) !important;
}

.needs-section.needs-premium .needs-3d-stage .need-node::before {
    inset: auto 18px -26px 18px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: radial-gradient(closest-side, rgba(5, 18, 13, .18), rgba(5, 18, 13, .06) 62%, transparent 82%) !important;
    filter: blur(10px) !important;
    opacity: .76 !important;
    transform: none !important;
    z-index: -1 !important;
}

.needs-section.needs-premium .needs-3d-stage .need-node::after {
    box-shadow: none !important;
    opacity: .58 !important;
}

.needs-section.needs-premium .needs-3d-stage .node-num {
    filter: none !important;
    text-shadow: none !important;
}

/* Re-centered desktop layout.
   All cards use center anchoring, so they stay inside the 1260px stage. */
.needs-section.needs-premium .needs-3d-stage .node-01 {
    left: 200px !important;
    top: 208px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}
.needs-section.needs-premium .needs-3d-stage .node-02 {
    left: 260px !important;
    top: 420px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}
.needs-section.needs-premium .needs-3d-stage .node-03 {
    left: 470px !important;
    top: 620px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}
.needs-section.needs-premium .needs-3d-stage .node-04 {
    left: 790px !important;
    top: 620px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}
.needs-section.needs-premium .needs-3d-stage .node-05 {
    left: 1000px !important;
    top: 420px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}
.needs-section.needs-premium .needs-3d-stage .node-06 {
    left: 1060px !important;
    top: 208px !important;
    --base-trans: translate(-50%, -50%) !important;
    transform: var(--base-trans) !important;
}

.needs-section.needs-premium .needs-3d-stage .need-node:hover,
.needs-section.needs-premium .needs-3d-stage .need-node.active {
    transform: var(--base-trans) translateY(-8px) translateZ(46px) !important;
    box-shadow:
        0 34px 60px rgba(5,24,17,.20),
        0 76px 100px rgba(5,24,17,.13),
        inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* Slightly softer connector glow so it does not look like green under-shadow. */
.needs-section.needs-premium .need-line-glow {
    stroke: rgba(1, 50, 32, .10) !important;
    filter: blur(8px) !important;
}
.needs-section.needs-premium .need-line-active {
    filter: drop-shadow(0 8px 12px rgba(1, 50, 32, .18)) !important;
}

/* Tablet: switch earlier to grid before the absolute desktop layout can squeeze. */
@media screen and (max-width: 1280px) {
    .needs-section.needs-premium .needs-3d-stage {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        margin-top: 34px !important;
        perspective: none !important;
        overflow: visible !important;
    }

    .needs-section.needs-premium .needs-stage-backplate,
    .needs-section.needs-premium .needs-depth-ring,
    .needs-section.needs-premium .needs-connector-svg,
    .needs-section.needs-premium .need-petal,
    .needs-section.needs-premium .needs-hub-wrap {
        display: none !important;
    }

    .needs-section.needs-premium .needs-3d-stage .need-node,
    .needs-section.needs-premium .needs-3d-stage .node-01,
    .needs-section.needs-premium .needs-3d-stage .node-02,
    .needs-section.needs-premium .needs-3d-stage .node-03,
    .needs-section.needs-premium .needs-3d-stage .node-04,
    .needs-section.needs-premium .needs-3d-stage .node-05,
    .needs-section.needs-premium .needs-3d-stage .node-06 {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-height: 194px !important;
        --base-trans: none !important;
        transform: none !important;
    }

    .needs-section.needs-premium .needs-3d-stage .need-node:hover,
    .needs-section.needs-premium .needs-3d-stage .need-node.active {
        transform: translateY(-6px) !important;
    }
}

@media screen and (max-width: 760px) {
    .needs-section.needs-premium {
        padding: 64px 16px 76px !important;
    }

    .needs-section.needs-premium .needs-3d-stage {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 28px !important;
    }

    .needs-section.needs-premium .needs-3d-stage .need-node {
        min-height: 0 !important;
        padding: 18px 18px 17px !important;
        border-radius: 26px !important;
        box-shadow:
            0 20px 36px rgba(5,24,17,.13),
            0 46px 66px rgba(5,24,17,.08),
            inset 0 1px 0 rgba(255,255,255,.92) !important;
    }

    .needs-section.needs-premium .needs-3d-stage .need-node::before {
        display: none !important;
    }

    .needs-section.needs-premium .needs-3d-stage .node-num {
        font-size: 2.25rem !important;
    }

    .needs-section.needs-premium .needs-3d-stage .node-text {
        font-size: .95rem !important;
    }

    .needs-section.needs-premium .needs-3d-stage .node-detail {
        font-size: .78rem !important;
        line-height: 1.62 !important;
    }
}

@media screen and (max-width: 420px) {
    .needs-section.needs-premium {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .needs-section.needs-premium .needs-3d-stage .need-node {
        padding: 16px 15px !important;
        border-radius: 24px !important;
    }

    .needs-section.needs-premium .needs-3d-stage .node-num {
        font-size: 2.05rem !important;
    }
}


/* === Needs Section Clipping Hotfix v2 === */

/* =========================================================
   NEXUS NEEDS SECTION CLIPPING HOTFIX v2
   Apply AFTER the previous needs-section patch, at the very
   bottom of style.css.

   Fixes the remaining clipping visible on the 2x3 card layout:
   - forces the section/stage to stop clipping outer glow/shadows
   - disables leftover radial/petal layers at every desktop width
   - converts the section to a stable premium 2x3 desktop grid
   - gives numbers/text enough line-height and padding to avoid
     font clipping
   - keeps mobile fully responsive
   ========================================================= */

/* Keep horizontal page safety while allowing this section's vertical shadows to breathe. */
html,
body {
    overflow-x: hidden !important;
}

section.needs-section,
.needs-section.needs-premium {
    position: relative !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    isolation: isolate !important;
    padding-bottom: clamp(78px, 7vw, 118px) !important;
}

/* The organic background may stay, but it must never sit above or clip the cards. */
.needs-section .needs-organic-bg,
.needs-section.needs-premium .needs-organic-bg {
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.needs-section .section-title,
.needs-section.needs-premium .section-title {
    position: relative !important;
    z-index: 3 !important;
}

/* Final stable layout: the old absolute 3D radial map is what caused the persistent clipping. */
#needsStage.needs-3d-stage,
.needs-section .needs-3d-stage,
.needs-section.needs-premium .needs-3d-stage {
    position: relative !important;
    z-index: 2 !important;
    width: min(1450px, calc(100vw - 64px)) !important;
    max-width: 1450px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(26px, 4vw, 48px) auto 0 !important;
    padding: 12px 0 42px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(24px, 2.6vw, 38px) clamp(28px, 3vw, 44px) !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    perspective: none !important;
    transform: none !important;
    transform-style: flat !important;
}

/* Remove every leftover decorative radial layer/petal/connector at all widths.
   These were still capable of creating green glow artifacts and edge clipping. */
#needsStage .needs-stage-backplate,
#needsStage .needs-depth-ring,
#needsStage .needs-connector-svg,
#needsStage .needs-hub-wrap,
#needsStage .need-petal,
.needs-section .needs-stage-backplate,
.needs-section .needs-depth-ring,
.needs-section .needs-connector-svg,
.needs-section .needs-hub-wrap,
.needs-section .need-petal {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Reset every card from old absolute coordinates. */
#needsStage .need-node,
.needs-section .needs-3d-stage .need-node,
.needs-section.needs-premium .needs-3d-stage .need-node,
.needs-section .needs-3d-stage .node-01,
.needs-section .needs-3d-stage .node-02,
.needs-section .needs-3d-stage .node-03,
.needs-section .needs-3d-stage .node-04,
.needs-section .needs-3d-stage .node-05,
.needs-section .needs-3d-stage .node-06 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: clamp(222px, 16.5vw, 260px) !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    box-sizing: border-box !important;
    padding: clamp(28px, 2.8vw, 38px) clamp(28px, 3vw, 42px) clamp(30px, 3vw, 42px) !important;
    border-radius: clamp(30px, 3vw, 46px) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(238,250,244,.64)),
        radial-gradient(circle at 10% 0%, rgba(80,200,120,.12), transparent 44%) !important;
    border: 1px solid rgba(255,255,255,.54) !important;
    box-shadow:
        0 24px 46px rgba(6, 26, 18, .13),
        0 54px 96px rgba(6, 26, 18, .11),
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -22px 46px rgba(1,50,32,.045) !important;
    backdrop-filter: blur(16px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
}

/* Soft dark shadow behind the cards, not green under-glow. */
#needsStage .need-node::before,
.needs-section .needs-3d-stage .need-node::before {
    content: '' !important;
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    bottom: -22px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: radial-gradient(closest-side, rgba(6, 18, 13, .24), rgba(6, 18, 13, .09) 58%, transparent 84%) !important;
    filter: blur(12px) !important;
    opacity: .7 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Move the top-right dot inward so it cannot appear clipped. */
#needsStage .need-node::after,
.needs-section .needs-3d-stage .need-node::after {
    content: '' !important;
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(111,246,87,.95), rgba(19,199,180,.82)) !important;
    box-shadow:
        0 0 0 7px rgba(80,200,120,.08),
        0 12px 22px rgba(5, 24, 17, .12) !important;
    opacity: .84 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Prevent gradient text and bold titles from being cropped by tight line boxes. */
#needsStage .node-num,
.needs-section .needs-3d-stage .node-num {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 14px !important;
    padding: 4px 0 8px !important;
    overflow: visible !important;
    line-height: 1.08 !important;
    font-size: clamp(3.9rem, 5.6vw, 5.35rem) !important;
    letter-spacing: -.07em !important;
    filter: none !important;
    text-shadow: none !important;
}

#needsStage .node-text,
.needs-section .needs-3d-stage .node-text {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 38px 16px 0 !important;
    overflow: visible !important;
    line-height: 1.32 !important;
    font-size: clamp(1.08rem, 1.45vw, 1.36rem) !important;
    letter-spacing: -.035em !important;
}

#needsStage .node-detail,
.needs-section .needs-3d-stage .node-detail {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1.72 !important;
    font-size: clamp(.92rem, 1.08vw, 1.06rem) !important;
    color: rgba(45, 58, 52, .66) !important;
}

/* Hover stays premium but never jumps far enough to clip. */
#needsStage .need-node:hover,
#needsStage .need-node.active,
.needs-section .needs-3d-stage .need-node:hover,
.needs-section .needs-3d-stage .need-node.active {
    transform: translateY(-6px) !important;
    box-shadow:
        0 30px 56px rgba(6, 26, 18, .16),
        0 68px 108px rgba(6, 26, 18, .13),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -22px 46px rgba(1,50,32,.045) !important;
}

/* Tablet */
@media screen and (max-width: 1180px) {
    #needsStage.needs-3d-stage,
    .needs-section .needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        width: calc(100vw - 40px) !important;
        gap: 22px !important;
        padding-bottom: 34px !important;
    }

    #needsStage .need-node,
    .needs-section .needs-3d-stage .need-node {
        min-height: 205px !important;
        padding: 26px 26px 30px !important;
        border-radius: 32px !important;
    }

    #needsStage .node-num,
    .needs-section .needs-3d-stage .node-num {
        font-size: clamp(3.25rem, 8vw, 4.4rem) !important;
    }

    #needsStage .node-text,
    .needs-section .needs-3d-stage .node-text {
        font-size: clamp(1rem, 2.4vw, 1.18rem) !important;
    }
}

/* Mobile */
@media screen and (max-width: 760px) {
    section.needs-section,
    .needs-section.needs-premium {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 78px !important;
        overflow: visible !important;
    }

    #needsStage.needs-3d-stage,
    .needs-section .needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 4px 0 18px !important;
    }

    #needsStage .need-node,
    .needs-section .needs-3d-stage .need-node {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-areas:
            "num title"
            "detail detail" !important;
        align-items: center !important;
        column-gap: 16px !important;
        min-height: 0 !important;
        padding: 19px 18px 20px !important;
        border-radius: 26px !important;
        overflow: visible !important;
    }

    #needsStage .need-node::before,
    .needs-section .needs-3d-stage .need-node::before {
        left: 18px !important;
        right: 18px !important;
        bottom: -14px !important;
        height: 24px !important;
        filter: blur(10px) !important;
        opacity: .45 !important;
    }

    #needsStage .need-node::after,
    .needs-section .needs-3d-stage .need-node::after {
        top: 18px !important;
        right: 18px !important;
        width: 10px !important;
        height: 10px !important;
    }

    #needsStage .node-num,
    .needs-section .needs-3d-stage .node-num {
        grid-area: num !important;
        margin: 0 !important;
        padding: 2px 0 4px !important;
        font-size: clamp(2.25rem, 12vw, 3rem) !important;
        line-height: 1.04 !important;
        align-self: center !important;
    }

    #needsStage .node-text,
    .needs-section .needs-3d-stage .node-text {
        grid-area: title !important;
        margin: 0 22px 0 0 !important;
        font-size: clamp(.92rem, 4.5vw, 1.05rem) !important;
        line-height: 1.34 !important;
        align-self: center !important;
    }

    #needsStage .node-detail,
    .needs-section .needs-3d-stage .node-detail {
        grid-area: detail !important;
        margin-top: 10px !important;
        font-size: .8rem !important;
        line-height: 1.65 !important;
    }
}

@media screen and (max-width: 420px) {
    section.needs-section,
    .needs-section.needs-premium {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #needsStage .need-node,
    .needs-section .needs-3d-stage .need-node {
        padding: 17px 15px 18px !important;
        column-gap: 12px !important;
        border-radius: 24px !important;
    }

    #needsStage .node-text,
    .needs-section .needs-3d-stage .node-text {
        margin-right: 18px !important;
        font-size: .92rem !important;
    }

    #needsStage .node-detail,
    .needs-section .needs-3d-stage .node-detail {
        font-size: .76rem !important;
    }
}


/* === Needs Section Final Hotfix v3: Compact 3x2 Grid === */

/* =========================================================
   NEXUS NEEDS SECTION FINAL HOTFIX v3
   Compact elegant 3x2 grid + desktop/mobile clipping repair

   Apply at the VERY BOTTOM of style.css, after v1/v2 patches.
   This deliberately overrides the earlier radial/2-column rules.

   Result:
   - Desktop: smaller premium 3x2 card grid
   - Tablet: clean 2-column grid
   - Mobile: compact 1-column cards
   - No card/text/dot clipping
   - More elegant rounded glass containers
   ========================================================= */

/* Global safety: avoid accidental page-width overflow from old 100vw rules. */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Section and every wrapper around the card grid must stop clipping shadows/text. */
section.needs-section,
.needs-section.needs-premium,
.needs-section.needs-premium .container,
.needs-section.needs-premium .section-header,
.needs-section.needs-premium .needs-stage-wrap {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    box-sizing: border-box !important;
}

.needs-section.needs-premium {
    position: relative !important;
    isolation: isolate !important;
    padding-top: clamp(74px, 7vw, 104px) !important;
    padding-bottom: clamp(76px, 7vw, 108px) !important;
}

/* Keep the section heading readable but not oversized on smaller screens. */
.needs-section.needs-premium .section-title {
    position: relative !important;
    z-index: 3 !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: .98 !important;
    overflow: visible !important;
}

.needs-section.needs-premium .section-subtitle {
    max-width: 690px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Disable old radial stage decoration completely.
   The user requested smaller elegant containers and the old radial layers
   are the source of most clipping/green-glow artifacts. */
.needs-section.needs-premium .needs-stage-backplate,
.needs-section.needs-premium .needs-depth-ring,
.needs-section.needs-premium .needs-connector-svg,
.needs-section.needs-premium .needs-hub-wrap,
.needs-section.needs-premium .needs-hub,
.needs-section.needs-premium .needs-hub-inner,
.needs-section.needs-premium .need-petal,
.needs-section.needs-premium .need-petal-inner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* FINAL DESKTOP LAYOUT: compact 3x2 grid. */
#needsStage.needs-3d-stage,
.needs-section.needs-premium .needs-3d-stage {
    position: relative !important;
    z-index: 2 !important;
    width: min(1160px, calc(100% - 40px)) !important;
    max-width: 1160px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: clamp(34px, 4vw, 54px) auto 0 !important;
    padding: 10px 6px 34px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    perspective: none !important;
    transform: none !important;
    transform-style: flat !important;
    box-sizing: border-box !important;
}

/* Reset all previous absolute coordinates and transforms from v1/v2/original CSS. */
#needsStage .need-node,
.needs-section.needs-premium .needs-3d-stage .need-node,
.needs-section.needs-premium .needs-3d-stage .node-01,
.needs-section.needs-premium .needs-3d-stage .node-02,
.needs-section.needs-premium .needs-3d-stage .node-03,
.needs-section.needs-premium .needs-3d-stage .node-04,
.needs-section.needs-premium .needs-3d-stage .node-05,
.needs-section.needs-premium .needs-3d-stage .node-06 {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 176px !important;
    margin: 0 !important;
    padding: 22px 23px 24px !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    box-sizing: border-box !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, .58) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(238,249,244,.62)),
        radial-gradient(circle at 8% 0%, rgba(80,200,120,.10), transparent 42%) !important;
    box-shadow:
        0 18px 34px rgba(5, 24, 17, .105),
        0 40px 68px rgba(5, 24, 17, .085),
        inset 0 1px 0 rgba(255,255,255,.90),
        inset 0 -18px 34px rgba(1,50,32,.035) !important;
    backdrop-filter: blur(14px) saturate(1.05) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

/* Darker soft shadow behind each card, intentionally subtle and not green. */
#needsStage .need-node::before,
.needs-section.needs-premium .needs-3d-stage .need-node::before {
    content: '' !important;
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    bottom: -16px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: radial-gradient(closest-side, rgba(5, 18, 13, .20), rgba(5, 18, 13, .07) 62%, transparent 86%) !important;
    filter: blur(10px) !important;
    opacity: .62 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Dot moved safely inward and made softer so it never clips at the radius. */
#needsStage .need-node::after,
.needs-section.needs-premium .needs-3d-stage .need-node::after {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(111,246,87,.92), rgba(20,199,180,.78)) !important;
    box-shadow:
        0 0 0 6px rgba(80,200,120,.07),
        0 10px 18px rgba(5, 24, 17, .11) !important;
    opacity: .82 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Text clipping repair: larger line boxes, no hidden overflow, smaller elegant scale. */
#needsStage .node-num,
.needs-section.needs-premium .needs-3d-stage .node-num {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 0 10px !important;
    padding: 3px 0 6px !important;
    overflow: visible !important;
    line-height: 1.12 !important;
    font-size: clamp(2.95rem, 3.6vw, 4.1rem) !important;
    letter-spacing: -.075em !important;
    filter: none !important;
    text-shadow: none !important;
    transform: none !important;
}

#needsStage .node-text,
.needs-section.needs-premium .needs-3d-stage .node-text {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 18px 10px 0 !important;
    overflow: visible !important;
    line-height: 1.28 !important;
    font-size: clamp(.94rem, 1.05vw, 1.06rem) !important;
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
    text-wrap: balance !important;
    transform: none !important;
}

#needsStage .node-detail,
.needs-section.needs-premium .needs-3d-stage .node-detail {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: 1.6 !important;
    font-size: clamp(.80rem, .9vw, .90rem) !important;
    color: rgba(45, 58, 52, .64) !important;
    transform: none !important;
}

/* Premium hover without causing clipping. */
#needsStage .need-node:hover,
#needsStage .need-node.active,
.needs-section.needs-premium .needs-3d-stage .need-node:hover,
.needs-section.needs-premium .needs-3d-stage .need-node.active {
    transform: translateY(-4px) !important;
    box-shadow:
        0 22px 42px rgba(5, 24, 17, .13),
        0 48px 78px rgba(5, 24, 17, .10),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -18px 34px rgba(1,50,32,.035) !important;
}

/* Tablet: elegant 2x3-ish flow without crowding. */
@media screen and (max-width: 1080px) {
    #needsStage.needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        width: min(820px, calc(100% - 32px)) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
        padding-bottom: 28px !important;
    }

    #needsStage .need-node,
    .needs-section.needs-premium .needs-3d-stage .need-node {
        min-height: 166px !important;
        padding: 20px 21px 22px !important;
        border-radius: 26px !important;
    }

    #needsStage .node-num,
    .needs-section.needs-premium .needs-3d-stage .node-num {
        font-size: clamp(2.75rem, 6vw, 3.6rem) !important;
    }

    #needsStage .node-text,
    .needs-section.needs-premium .needs-3d-stage .node-text {
        font-size: clamp(.90rem, 1.9vw, 1rem) !important;
    }
}

/* Mobile: compact cards, no clipping, no oversized containers. */
@media screen and (max-width: 720px) {
    .needs-section.needs-premium {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 62px !important;
        padding-bottom: 72px !important;
    }

    .needs-section.needs-premium .section-title {
        max-width: 100% !important;
        font-size: clamp(2.25rem, 11.5vw, 3.25rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.065em !important;
    }

    .needs-section.needs-premium .section-subtitle {
        max-width: 92% !important;
        font-size: .88rem !important;
        line-height: 1.65 !important;
    }

    #needsStage.needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 26px !important;
        padding: 4px 0 20px !important;
        overflow: visible !important;
    }

    #needsStage .need-node,
    .needs-section.needs-premium .needs-3d-stage .need-node {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas:
            "num title"
            "detail detail" !important;
        align-items: center !important;
        column-gap: 13px !important;
        row-gap: 0 !important;
        min-height: 0 !important;
        padding: 15px 16px 17px !important;
        border-radius: 22px !important;
        box-shadow:
            0 14px 28px rgba(5, 24, 17, .10),
            0 30px 50px rgba(5, 24, 17, .075),
            inset 0 1px 0 rgba(255,255,255,.90),
            inset 0 -14px 26px rgba(1,50,32,.030) !important;
    }

    #needsStage .need-node::before,
    .needs-section.needs-premium .needs-3d-stage .need-node::before {
        left: 18px !important;
        right: 18px !important;
        bottom: -10px !important;
        height: 18px !important;
        filter: blur(8px) !important;
        opacity: .42 !important;
    }

    #needsStage .need-node::after,
    .needs-section.needs-premium .needs-3d-stage .need-node::after {
        top: 15px !important;
        right: 15px !important;
        width: 8px !important;
        height: 8px !important;
        box-shadow:
            0 0 0 5px rgba(80,200,120,.06),
            0 8px 14px rgba(5, 24, 17, .10) !important;
    }

    #needsStage .node-num,
    .needs-section.needs-premium .needs-3d-stage .node-num {
        grid-area: num !important;
        margin: 0 !important;
        padding: 2px 0 5px !important;
        font-size: clamp(2.25rem, 12vw, 2.9rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.075em !important;
        align-self: center !important;
    }

    #needsStage .node-text,
    .needs-section.needs-premium .needs-3d-stage .node-text {
        grid-area: title !important;
        margin: 0 22px 0 0 !important;
        font-size: clamp(.86rem, 4.2vw, .98rem) !important;
        line-height: 1.32 !important;
        letter-spacing: -.035em !important;
        align-self: center !important;
    }

    #needsStage .node-detail,
    .needs-section.needs-premium .needs-3d-stage .node-detail {
        grid-area: detail !important;
        margin-top: 9px !important;
        font-size: .76rem !important;
        line-height: 1.58 !important;
    }

    #needsStage .need-node:hover,
    #needsStage .need-node.active,
    .needs-section.needs-premium .needs-3d-stage .need-node:hover,
    .needs-section.needs-premium .needs-3d-stage .need-node.active {
        transform: translateY(-2px) !important;
    }
}

@media screen and (max-width: 390px) {
    .needs-section.needs-premium {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #needsStage .need-node,
    .needs-section.needs-premium .needs-3d-stage .need-node {
        padding: 14px 14px 16px !important;
        column-gap: 10px !important;
        border-radius: 20px !important;
    }

    #needsStage .node-num,
    .needs-section.needs-premium .needs-3d-stage .node-num {
        font-size: 2.18rem !important;
    }

    #needsStage .node-text,
    .needs-section.needs-premium .needs-3d-stage .node-text {
        margin-right: 18px !important;
        font-size: .84rem !important;
    }

    #needsStage .node-detail,
    .needs-section.needs-premium .needs-3d-stage .node-detail {
        font-size: .735rem !important;
    }
}


/* === Needs Section Hotfix v4: Mobile Subtitle Text Repair === */

/* =========================================================
   NEXUS NEEDS SECTION HOTFIX v4
   Mobile subtitle/text repair + compact card preservation

   Apply at the VERY BOTTOM of style.css, after v1/v2/v3.
   This fixes the mobile paragraph text under:
   "Why Your Business Needs a Professional Web Design Company"

   Issue fixed:
   - Subtitle text was visually overlapping/jumbling on mobile.
   - This resets inherited transforms/split-text spans/line boxes only
     inside the needs-section subtitle.
   ========================================================= */

/* Subtitle repair: keep the paragraph as normal readable text. */
.needs-section.needs-premium .section-subtitle,
.needs-section.needs-premium p.section-subtitle,
section.needs-section .section-subtitle,
section.needs-section p.section-subtitle {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: min(680px, 92vw) !important;
    max-width: 680px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: pretty !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    line-height: 1.78 !important;
    font-size: clamp(.92rem, 1.05vw, 1.02rem) !important;
    color: rgba(45, 58, 52, .68) !important;
    opacity: 1 !important;
}

/* If any animation/split-text script wrapped the paragraph words/letters,
   force those wrappers back into normal inline text flow. */
.needs-section.needs-premium .section-subtitle *,
section.needs-section .section-subtitle * {
    display: inline !important;
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    white-space: normal !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    line-height: inherit !important;
    opacity: 1 !important;
}

/* Keep the heading/subtitle stack from colliding on narrow screens. */
.needs-section.needs-premium .section-header,
section.needs-section .section-header {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    margin-bottom: 0 !important;
}

/* Mobile-specific spacing: give the large title and paragraph enough room. */
@media screen and (max-width: 720px) {
    .needs-section.needs-premium {
        padding-top: 58px !important;
    }

    .needs-section.needs-premium .section-eyebrow,
    section.needs-section .section-eyebrow {
        margin-bottom: 22px !important;
    }

    .needs-section.needs-premium .section-title,
    section.needs-section .section-title {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        contain: none !important;
        text-align: center !important;
        line-height: 1.04 !important;
        letter-spacing: -.065em !important;
        text-wrap: balance !important;
    }

    .needs-section.needs-premium .section-subtitle,
    .needs-section.needs-premium p.section-subtitle,
    section.needs-section .section-subtitle,
    section.needs-section p.section-subtitle {
        width: min(500px, 88vw) !important;
        max-width: 500px !important;
        margin-top: 22px !important;
        margin-bottom: 0 !important;
        font-size: .86rem !important;
        line-height: 1.82 !important;
        letter-spacing: 0 !important;
        word-spacing: normal !important;
        text-align: center !important;
    }

    #needsStage.needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        margin-top: 34px !important;
    }
}

@media screen and (max-width: 420px) {
    .needs-section.needs-premium .section-subtitle,
    .needs-section.needs-premium p.section-subtitle,
    section.needs-section .section-subtitle,
    section.needs-section p.section-subtitle {
        width: min(360px, 90vw) !important;
        max-width: 360px !important;
        font-size: .82rem !important;
        line-height: 1.86 !important;
        margin-top: 20px !important;
    }

    #needsStage.needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        margin-top: 30px !important;
    }
}


/* === Needs Section Hotfix v5: Correct Mobile Paragraph Repair === */

/* =========================================================
   NEXUS NEEDS SECTION HOTFIX v5
   Correct mobile subtitle repair for latest baseline

   Apply at the VERY BOTTOM of style.css, after v1/v2/v3/v4.

   Root cause:
   - The latest index.html paragraph is NOT .section-subtitle.
   - It is inside: .needs-section.needs-premium .needs-title-wrap > p
   - Previous subtitle fix targeted the wrong class, so mobile still
     showed the paragraph as compressed/overlapped text.

   This patch visually replaces only that broken paragraph rendering
   with a clean, normal paragraph while keeping the original HTML text
   in the DOM.
   ========================================================= */

/* Keep the needs title wrapper clean and unclipped. */
.needs-section.needs-premium .needs-title-wrap,
section.needs-section.needs-premium .needs-title-wrap {
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    max-width: 1060px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
}

/* Hide only the broken visual rendering of the original paragraph.
   The real text stays in the HTML; the ::after text below is used
   for clean visual output. */
.needs-section.needs-premium .needs-title-wrap > p,
section.needs-section.needs-premium .needs-title-wrap > p {
    position: relative !important;
    display: block !important;
    width: min(720px, 92vw) !important;
    max-width: 720px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;

    /* suppress the broken glyph layout */
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    white-space: normal !important;
}

/* Defensive: if any script/browser extension has wrapped words/letters,
   keep those wrappers invisible so they cannot overlap. */
.needs-section.needs-premium .needs-title-wrap > p *,
section.needs-section.needs-premium .needs-title-wrap > p * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Clean replacement paragraph. */
.needs-section.needs-premium .needs-title-wrap > p::after,
section.needs-section.needs-premium .needs-title-wrap > p::after {
    content: "A premium website is more than a digital brochure. It has to look credible, load fast, guide visitors smoothly and turn attention into enquiries. These six pillars show what a professionally built website adds to your business growth engine.";
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;

    font-family: "Inter", "Poppins", "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(.92rem, 1vw, 1.02rem) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.82 !important;
    letter-spacing: .005em !important;
    word-spacing: .04em !important;
    text-align: center !important;
    text-transform: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-wrap: pretty !important;
    color: rgba(45, 58, 52, .70) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Mobile title/subtitle spacing so the heading never collides with the paragraph. */
@media screen and (max-width: 720px) {
    .needs-section.needs-premium,
    section.needs-section.needs-premium {
        padding-top: 58px !important;
    }

    .needs-section.needs-premium .needs-title-wrap,
    section.needs-section.needs-premium .needs-title-wrap {
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .needs-section.needs-premium .needs-title-wrap .section-eyebrow,
    section.needs-section.needs-premium .needs-title-wrap .section-eyebrow {
        margin-bottom: 22px !important;
    }

    .needs-section.needs-premium .needs-title-wrap h2,
    section.needs-section.needs-premium .needs-title-wrap h2 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
        clip-path: none !important;
        contain: none !important;
        transform: none !important;
        text-align: center !important;
        font-size: clamp(2.35rem, 10.4vw, 3.25rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -.06em !important;
        text-wrap: balance !important;
    }

    .needs-section.needs-premium .needs-title-wrap h2 span,
    section.needs-section.needs-premium .needs-title-wrap h2 span {
        display: block !important;
        margin-top: 12px !important;
        overflow: visible !important;
        line-height: 1.04 !important;
        letter-spacing: -.055em !important;
    }

    .needs-section.needs-premium .needs-title-wrap > p,
    section.needs-section.needs-premium .needs-title-wrap > p {
        width: min(500px, 90vw) !important;
        max-width: 500px !important;
        margin-top: 24px !important;
        margin-bottom: 0 !important;
    }

    .needs-section.needs-premium .needs-title-wrap > p::after,
    section.needs-section.needs-premium .needs-title-wrap > p::after {
        font-size: .86rem !important;
        line-height: 1.86 !important;
        letter-spacing: .004em !important;
        word-spacing: .03em !important;
        max-width: 500px !important;
    }

    #needsStage.needs-3d-stage,
    .needs-section.needs-premium .needs-3d-stage {
        margin-top: 34px !important;
    }
}

@media screen and (max-width: 430px) {
    .needs-section.needs-premium .needs-title-wrap h2,
    section.needs-section.needs-premium .needs-title-wrap h2 {
        font-size: clamp(2.14rem, 10.8vw, 2.92rem) !important;
        line-height: 1.05 !important;
    }

    .needs-section.needs-premium .needs-title-wrap h2 span,
    section.needs-section.needs-premium .needs-title-wrap h2 span {
        margin-top: 10px !important;
    }

    .needs-section.needs-premium .needs-title-wrap > p,
    section.needs-section.needs-premium .needs-title-wrap > p {
        width: min(350px, 88vw) !important;
        max-width: 350px !important;
        margin-top: 22px !important;
    }

    .needs-section.needs-premium .needs-title-wrap > p::after,
    section.needs-section.needs-premium .needs-title-wrap > p::after {
        font-size: .80rem !important;
        line-height: 1.9 !important;
        max-width: 350px !important;
    }
}


/* NEXUS_SEO_KEYWORD_LANDING_PAGES_V1: internal SEO service link block */
.seo-footer-links{max-width:1160px;margin:18px auto 0;padding:18px 8%;display:flex;flex-wrap:wrap;gap:9px 12px;align-items:center;color:rgba(255,255,255,.84);font-size:13px}.seo-footer-links strong{color:#fff;margin-right:4px}.seo-footer-links a{color:#dff8e9;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 10px;text-decoration:none;transition:transform .2s ease,background .2s ease}.seo-footer-links a:hover{background:rgba(80,200,120,.14);transform:translateY(-1px)}@media(max-width:640px){.seo-footer-links{padding:16px 24px;align-items:flex-start;flex-direction:column}.seo-footer-links a{display:inline-flex}}


/* === SEO Landing Pages Cursor Fix v1 === */

/* =========================================================
   NEXUS SEO LANDING PAGES CURSOR FIX v1
   Apply at the VERY BOTTOM of style.css.

   Issue:
   - The new SEO landing pages use body.seo-landing.
   - Existing site-wide premium/custom cursor styles can hide the
     native browser cursor.
   - These SEO pages did not include the full custom cursor DOM setup,
     so the cursor can appear missing.

   Fix:
   - Restore the normal native cursor only on SEO landing pages.
   - Keep correct pointer/text cursors for interactive elements.
   - Does not affect homepage/product/cart/checkout/customer/admin pages.
   ========================================================= */

html body.seo-landing,
html body.seo-landing * {
    cursor: auto !important;
}

html body.seo-landing a,
html body.seo-landing button,
html body.seo-landing summary,
html body.seo-landing label,
html body.seo-landing select,
html body.seo-landing option,
html body.seo-landing .seo-cta,
html body.seo-landing .seo-mini-nav a,
html body.seo-landing .mobile-menu-toggle,
html body.seo-landing .nav-item a,
html body.seo-landing [role="button"],
html body.seo-landing input[type="button"],
html body.seo-landing input[type="submit"],
html body.seo-landing input[type="reset"] {
    cursor: pointer !important;
}

html body.seo-landing input,
html body.seo-landing textarea,
html body.seo-landing [contenteditable="true"] {
    cursor: text !important;
}

html body.seo-landing input[type="checkbox"],
html body.seo-landing input[type="radio"],
html body.seo-landing input[type="range"],
html body.seo-landing input[type="file"] {
    cursor: pointer !important;
}

/* If the global custom cursor elements are injected on these pages,
   do not let them block clicks or create invisible cursor behavior. */
html body.seo-landing .cursor,
html body.seo-landing .cursor-dot,
html body.seo-landing .cursor-outline,
html body.seo-landing .custom-cursor,
html body.seo-landing .custom-cursor-dot,
html body.seo-landing .custom-cursor-follower {
    pointer-events: none !important;
}


/* NEXUS_FORMATDATE_NEEDS_CLIP_FIX_V2_CSS: final needs-section number clipping repair */
.needs-section.needs-premium,
.needs-section.needs-premium .container,
.needs-section.needs-premium .needs-3d-stage,
.needs-section.needs-premium .need-node,
.needs-section.needs-premium .node-num,
.needs-section.needs-premium .node-text,
.needs-section.needs-premium .node-detail {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

.needs-section.needs-premium .needs-3d-stage {
    width: min(1200px, calc(100% - 42px)) !important;
    max-width: 1200px !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: clamp(34px, 4vw, 54px) auto 0 !important;
    padding: 16px 4px 42px !important;
    transform: none !important;
    perspective: none !important;
}

.needs-section.needs-premium .needs-stage-backplate,
.needs-section.needs-premium .needs-depth-ring,
.needs-section.needs-premium .needs-connector-svg,
.needs-section.needs-premium .needs-hub-wrap,
.needs-section.needs-premium .need-petal {
    display: none !important;
}

.needs-section.needs-premium .need-node,
.needs-section.needs-premium .node-01,
.needs-section.needs-premium .node-02,
.needs-section.needs-premium .node-03,
.needs-section.needs-premium .node-04,
.needs-section.needs-premium .node-05,
.needs-section.needs-premium .node-06 {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 210px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 34px 26px 28px !important;
    border-radius: 30px !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.needs-section.needs-premium .node-num {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: .10em .02em .16em !important;
    line-height: 1.18 !important;
    font-size: clamp(3.05rem, 3.85vw, 4.35rem) !important;
    letter-spacing: -.075em !important;
    overflow: visible !important;
    transform: translateY(0) !important;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.needs-section.needs-premium .node-text {
    margin-top: 0 !important;
    line-height: 1.34 !important;
    font-size: clamp(.96rem, 1.05vw, 1.08rem) !important;
}

.needs-section.needs-premium .node-detail {
    line-height: 1.64 !important;
    font-size: clamp(.82rem, .9vw, .92rem) !important;
}

@media screen and (max-width: 1080px) {
    .needs-section.needs-premium .needs-3d-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(860px, calc(100% - 34px)) !important;
        gap: 18px !important;
    }
    .needs-section.needs-premium .need-node {
        min-height: 184px !important;
        padding: 28px 23px 24px !important;
    }
}

@media screen and (max-width: 720px) {
    .needs-section.needs-premium .needs-3d-stage {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 10px 0 26px !important;
    }
    .needs-section.needs-premium .need-node {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-areas: "num title" "detail detail" !important;
        align-items: center !important;
        column-gap: 14px !important;
        min-height: 0 !important;
        padding: 18px 18px 19px !important;
        border-radius: 24px !important;
    }
    .needs-section.needs-premium .node-num {
        grid-area: num !important;
        align-self: center !important;
        margin: 0 !important;
        padding: .06em .02em .14em !important;
        line-height: 1.22 !important;
        font-size: clamp(2.45rem, 12vw, 3.15rem) !important;
    }
    .needs-section.needs-premium .node-text {
        grid-area: title !important;
        align-self: center !important;
        margin: 0 22px 0 0 !important;
        line-height: 1.36 !important;
        font-size: clamp(.9rem, 4.2vw, 1.02rem) !important;
    }
    .needs-section.needs-premium .node-detail {
        grid-area: detail !important;
        margin-top: 10px !important;
        line-height: 1.62 !important;
        font-size: .78rem !important;
    }
}

@media screen and (max-width: 390px) {
    .needs-section.needs-premium .need-node {
        padding: 17px 15px 18px !important;
        column-gap: 11px !important;
    }
    .needs-section.needs-premium .node-num {
        font-size: 2.25rem !important;
        line-height: 1.24 !important;
    }
    .needs-section.needs-premium .node-text {
        font-size: .86rem !important;
    }
}
/* =========================================================
   CART NAV BADGE — green pill next to "CART" in the nav
   ========================================================= */
.cart-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--emerald);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    margin-left: 7px;
}

/* NEXUS FINAL FULL-WIDTH EMERALD CARD BOTTOM ANIMATION START */
/* Final version: full-width inverted emerald semi-circle belongs to the card bottom, sits behind CTA, and rises on hover. */
.pricing-card,
.shop-product-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

/* Disable the older small decorative pseudo-circle so only the final full-width card-bottom shape appears. */
.pricing-card::before,
.shop-product-card::before {
    content: none !important;
    display: none !important;
}

/* Keep all normal card content above the emerald bottom field. */
.pricing-card > *,
.shop-product-card > * {
    position: relative !important;
    z-index: 3 !important;
}

.pricing-card .pricing-ribbon {
    z-index: 6 !important;
}

/* The actual full-width inverted semi-circle across the bottom of every package/product card. */
.pricing-card::after,
.shop-product-card::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -190px !important;
    width: 172% !important;
    max-width: none !important;
    height: 390px !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.35) 0 8%, transparent 30%),
        radial-gradient(circle at 74% 18%, rgba(255,255,255,.16) 0 7%, transparent 28%),
        linear-gradient(135deg, #9cec3f 0%, #50C878 44%, #00b8a9 100%) !important;
    box-shadow:
        0 -34px 86px rgba(80, 200, 120, .36),
        inset 0 30px 48px rgba(255, 255, 255, .26),
        inset 0 -42px 72px rgba(1, 50, 32, .24) !important;
    opacity: .94 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transform: translateX(-50%) translateY(0) scaleX(1) !important;
    transform-origin: center bottom !important;
    transition:
        transform .62s cubic-bezier(.16,1,.3,1),
        opacity .62s ease,
        filter .62s ease,
        box-shadow .62s ease !important;
}

.pricing-card:hover::after,
.shop-product-card:hover::after,
.pricing-card:focus-within::after,
.shop-product-card:focus-within::after {
    transform: translateX(-50%) translateY(-62px) scaleX(1.045) !important;
    opacity: 1 !important;
    filter: saturate(1.15) brightness(1.04) !important;
    box-shadow:
        0 -44px 106px rgba(80, 200, 120, .44),
        inset 0 36px 58px rgba(255, 255, 255, .30),
        inset 0 -44px 80px rgba(1, 50, 32, .28) !important;
}

/* CTA must sit clearly above the emerald card-bottom shape. */
.package-cta,
.shop-card-cta.shop-add-cart-btn,
.shop-card-cta.shop-configure-btn {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate !important;
    overflow: visible !important;
    box-shadow:
        0 0 28px rgba(1, 20, 14, .42),
        0 0 70px rgba(1, 50, 32, .32) !important;
    transition:
        transform .34s cubic-bezier(.16,1,.3,1),
        filter .34s ease,
        box-shadow .34s ease !important;
}

/* Centered dark diffused shadow below/behind button: x-axis 0, y-axis 0. */
.package-cta::after,
.shop-card-cta.shop-add-cart-btn::after,
.shop-card-cta.shop-configure-btn::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(100% + 52px) !important;
    height: calc(100% + 36px) !important;
    border-radius: 999px !important;
    background: rgba(1, 18, 13, .52) !important;
    filter: blur(30px) !important;
    opacity: .82 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    transform-origin: center !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition:
        opacity .34s ease,
        transform .34s ease,
        filter .34s ease !important;
}

.pricing-card:hover .package-cta,
.package-cta:hover,
.shop-product-card:hover .shop-card-cta.shop-add-cart-btn,
.shop-product-card:hover .shop-card-cta.shop-configure-btn,
.shop-card-cta.shop-add-cart-btn:hover,
.shop-card-cta.shop-configure-btn:hover {
    transform: translateY(-7px) scale(1.018) !important;
    filter: brightness(1.05) saturate(1.06) !important;
    box-shadow:
        0 0 36px rgba(1, 20, 14, .56),
        0 0 88px rgba(1, 50, 32, .44) !important;
}

.pricing-card:hover .package-cta::after,
.package-cta:hover::after,
.shop-product-card:hover .shop-card-cta.shop-add-cart-btn::after,
.shop-product-card:hover .shop-card-cta.shop-configure-btn::after,
.shop-card-cta.shop-add-cart-btn:hover::after,
.shop-card-cta.shop-configure-btn:hover::after {
    opacity: 1 !important;
    filter: blur(36px) !important;
    transform: translate(-50%, -50%) scale(1.18, 1.24) !important;
}

@media (max-width: 768px) {
    .pricing-card::after,
    .shop-product-card::after {
        width: 190% !important;
        height: 360px !important;
        bottom: -176px !important;
    }

    .pricing-card:hover::after,
    .shop-product-card:hover::after,
    .pricing-card:focus-within::after,
    .shop-product-card:focus-within::after {
        transform: translateX(-50%) translateY(-50px) scaleX(1.045) !important;
    }
}

@media (max-width: 420px) {
    .pricing-card::after,
    .shop-product-card::after {
        width: 205% !important;
        height: 340px !important;
        bottom: -168px !important;
    }
}
/* NEXUS FINAL FULL-WIDTH EMERALD CARD BOTTOM ANIMATION END */
/* NEXUS PREMIUM ORGANIC POPULAR BADGE START */
/* Redesigns the Creative plan "Popular" ribbon into a smaller premium organic badge. */
.pricing-card.featured-plan {
    position: relative !important;
}

.pricing-card.featured-plan .pricing-ribbon {
    position: absolute !important;
    top: 22px !important;
    right: 76px !important;
    width: auto !important;
    min-width: 104px !important;
    height: 36px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 22% 22%, rgba(255,255,255,.72), transparent 34%),
        linear-gradient(135deg, #9cf06a 0%, #50C878 46%, #04b8a9 100%) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
    border-radius: 999px 999px 999px 26px !important;
    box-shadow:
        0 16px 34px rgba(1, 50, 32, .18),
        0 8px 22px rgba(80, 200, 120, .28),
        inset 0 1px 0 rgba(255,255,255,.56),
        inset 0 -8px 18px rgba(1, 50, 32, .12) !important;
    transform: rotate(-7deg) !important;
    transform-origin: center !important;
    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 12 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
    transition:
        transform .42s cubic-bezier(.16,1,.3,1),
        filter .42s ease,
        box-shadow .42s ease !important;
}

.pricing-card.featured-plan .pricing-ribbon span {
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
}

.pricing-card.featured-plan .pricing-ribbon::before {
    content: '' !important;
    position: absolute !important;
    inset: 4px 6px 14px 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,0)) !important;
    opacity: .75 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.pricing-card.featured-plan .pricing-ribbon::after {
    content: '' !important;
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    right: -9px !important;
    bottom: -8px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(156,240,106,.64), rgba(80,200,120,.22) 52%, transparent 72%) !important;
    filter: blur(1px) !important;
    opacity: .86 !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.pricing-card.featured-plan:hover .pricing-ribbon,
.pricing-card.featured-plan:focus-within .pricing-ribbon {
    transform: translateY(-4px) rotate(-4deg) scale(1.025) !important;
    filter: saturate(1.1) brightness(1.04) !important;
    box-shadow:
        0 20px 42px rgba(1, 50, 32, .22),
        0 10px 28px rgba(80, 200, 120, .34),
        inset 0 1px 0 rgba(255,255,255,.62),
        inset 0 -8px 18px rgba(1, 50, 32, .13) !important;
}

@media (max-width: 768px) {
    .pricing-card.featured-plan .pricing-ribbon {
        top: 18px !important;
        right: 68px !important;
        min-width: 92px !important;
        height: 32px !important;
        padding: 0 13px !important;
        font-size: 9px !important;
        letter-spacing: .13em !important;
        border-radius: 999px 999px 999px 22px !important;
    }

    .pricing-card.featured-plan .pricing-ribbon::after {
        width: 22px !important;
        height: 22px !important;
        right: -7px !important;
        bottom: -6px !important;
    }
}
/* NEXUS PREMIUM ORGANIC POPULAR BADGE END */

/* NEXUS POPULAR CORNER RIBBON V6 START */

/* Final ribbon reset: emulate the uploaded top-left corner ribbon in emerald, and neutralize older custom patches. */
.pricing-card.featured-plan .pricing-ribbon {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 98px !important;
    height: 98px !important;
    overflow: hidden !important;
    z-index: 30 !important;
    pointer-events: none !important;

    /* show the text inside the band */
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Emerald diagonal band */
.pricing-card.featured-plan .pricing-ribbon::before {
    content: 'POPULAR' !important;
    position: absolute !important;
    top: 16px !important;
    left: -27px !important;
    width: 138px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 42%, rgba(0,72,57,.16) 100%),
        linear-gradient(135deg, #8ff068 0%, #49d785 52%, #12bfa9 100%) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.14) !important;
    border-radius: 2px !important;
    box-shadow:
        0 10px 16px rgba(6, 86, 64, .18),
        inset 0 1px 0 rgba(255,255,255,.26) !important;
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
}

/* dark fold at the lower-left end */
.pricing-card.featured-plan .pricing-ribbon::after {
    content: '' !important;
    position: absolute !important;
    left: 16px !important;
    top: 56px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 0 solid transparent !important;
    border-top: 9px solid #0c8c67 !important;
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    filter: brightness(.82) !important;
}

/* separate top-right fold piece */
.pricing-card.featured-plan {
    position: relative !important;
    overflow: hidden !important;
}
.pricing-card.featured-plan .pricing-ribbon span { display: none !important; }
.pricing-card.featured-plan .pricing-ribbon i { display: none !important; }
.pricing-card.featured-plan .pricing-ribbon + .pricing-topline {
    margin-top: 2px !important;
}
.pricing-card.featured-plan .pricing-ribbon:empty { display:block !important; }
.pricing-card.featured-plan .pricing-topline { position: relative !important; z-index: 5 !important; }

/* Faux second fold tip matching the reference */
.pricing-card.featured-plan::before {
    content: '' !important;
    position: absolute !important;
    top: 7px !important;
    left: 71px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    border-bottom: 11px solid #0c8c67 !important;
    transform: rotate(-45deg) !important;
    transform-origin: center !important;
    filter: brightness(.82) !important;
    z-index: 29 !important;
}

.pricing-card.featured-plan:hover .pricing-ribbon::before,
.pricing-card.featured-plan:focus-within .pricing-ribbon::before {
    transform: rotate(-45deg) translateY(-1px) !important;
    box-shadow:
        0 12px 18px rgba(6, 86, 64, .22),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
    filter: brightness(1.03) saturate(1.03) !important;
}

@media (max-width: 768px) {
    .pricing-card.featured-plan .pricing-ribbon {
        width: 90px !important;
        height: 90px !important;
    }
    .pricing-card.featured-plan .pricing-ribbon::before {
        top: 15px !important;
        left: -25px !important;
        width: 130px !important;
        height: 28px !important;
        font-size: 8.5px !important;
        letter-spacing: .10em !important;
    }
    .pricing-card.featured-plan .pricing-ribbon::after {
        left: 15px !important;
        top: 51px !important;
        border-left-width: 8px !important;
        border-top-width: 8px !important;
    }
    .pricing-card.featured-plan::before {
        top: 7px !important;
        left: 65px !important;
        border-left-width: 10px !important;
        border-right-width: 10px !important;
        border-bottom-width: 10px !important;
    }
}
/* NEXUS POPULAR CORNER RIBBON V6 END */