/* ==========================================================================
   Event Management ERP — brand-new "Celebration" design.
   Three pillars: Event Management · Event Decoration · Catering Management.
   Festive violet + pink + gold on warm blush. Scoped under .ev-scope
   (+ page-only .ev-header-bg). Self-contained new page.
   ========================================================================== */
.ev-scope {
    --ev-ink: #211a3a;
    --ev: #7c3aed;            /* celebration violet */
    --ev-2: #9d5cf5;
    --ev-3: #5b21b6;          /* deep violet */
    --ev-pink: #ff4d8d;       /* festive pink */
    --ev-gold: #f0a500;       /* champagne gold */
    --ev-teal: #10b7a6;       /* accent */
    --ev-soft: #f2ecfe;
    --ev-soft-2: #faf7ff;
    --ev-cream: #fbf5ee;
    --ev-line: #ece6f4;
    --ev-muted: #6b6580;
    --ev-grad: linear-gradient(120deg, #9d5cf5 0%, #7c3aed 55%, #5b21b6 100%);
    --ev-grad-pink: linear-gradient(120deg, #ff6fa3 0%, #ff4d8d 100%);
    --ev-grad-gold: linear-gradient(120deg, #ffcb52 0%, #f0a500 100%);
    --ev-grad-teal: linear-gradient(120deg, #2fd4c4 0%, #10b7a6 100%);
    color: #3a3550;
}
.ev-scope section { overflow: hidden; }

/* page-only header background so the navbar blends into the hero */
.ev-header-bg {
    background:
        radial-gradient(1100px 320px at 85% 130%, #f0e4ff 0%, rgba(240,228,255,0) 70%),
        #faf6f1;
}

/* ---- shared bits ---- */
.ev-kicker {
    display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ev-3); background: var(--ev-soft);
    padding: .45rem .95rem; border-radius: 2rem; border: 1px solid #e6d9fb;
}
.ev-kicker.on-dark { color: #d9c6ff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.ev-h { font-weight: 800; letter-spacing: -.02em; color: var(--ev-ink); line-height: 1.12; }
.ev-grad-txt { background: var(--ev-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ev-pink-txt { background: var(--ev-grad-pink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ev-lead { color: var(--ev-muted); font-size: 1.075rem; line-height: 1.7; }
.ev-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.ev-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.ev-head p { margin-top: 1rem; }

/* buttons */
.ev-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; padding: .9rem 1.55rem; border-radius: .85rem; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.ev-btn i { transition: transform .25s ease; }
.ev-btn:hover i { transform: translate(2px,-2px); }
.ev-btn-primary { background: var(--ev-grad); color: #fff; box-shadow: 0 .8rem 1.8rem rgba(124,58,237,.34); }
.ev-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 2.4rem rgba(124,58,237,.46); }
.ev-btn-ghost { background: #fff; color: var(--ev-3); border: 1.5px solid var(--ev-line); }
.ev-btn-ghost:hover { color: var(--ev-3); transform: translateY(-3px); border-color: var(--ev); box-shadow: 0 1rem 2rem rgba(124,58,237,.14); }
.ev-btn-light { background: #fff; color: var(--ev-3); box-shadow: 0 .8rem 1.6rem rgba(20,14,40,.22); }
.ev-btn-light:hover { color: var(--ev-3); transform: translateY(-3px); }

/* ==========================================================================
   HERO — split copy + event card (confetti bg)
   ========================================================================== */
.ev-hero {
    position: relative;
    background:
        radial-gradient(880px 460px at 84% -12%, #efe1ff 0%, rgba(239,225,255,0) 60%),
        radial-gradient(760px 440px at 4% 108%, #ffe6ef 0%, rgba(255,230,239,0) 55%),
        #faf6f1;
}
.ev-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(6px 6px at 12% 22%, rgba(124,58,237,.5), transparent),
        radial-gradient(5px 5px at 22% 62%, rgba(255,77,141,.5), transparent),
        radial-gradient(6px 6px at 78% 16%, rgba(240,165,0,.55), transparent),
        radial-gradient(5px 5px at 90% 44%, rgba(16,183,166,.5), transparent),
        radial-gradient(5px 5px at 40% 12%, rgba(124,58,237,.4), transparent),
        radial-gradient(6px 6px at 64% 66%, rgba(255,77,141,.4), transparent),
        radial-gradient(4px 4px at 8% 82%, rgba(240,165,0,.5), transparent);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
}
.ev-hero .container { position: relative; z-index: 2; }
.ev-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.ev-hero-trust { display: flex; flex-wrap: wrap; gap: 1.3rem 1.9rem; }
.ev-hero-trust .t { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ev-ink); font-size: .95rem; }
.ev-hero-trust .t i { color: var(--ev); font-size: 1.15rem; }

/* event card */
.ev-cardwrap { position: relative; }
.ev-card { position: relative; z-index: 2; background: #fff; border-radius: 1.5rem; border: 1px solid var(--ev-line); box-shadow: 0 2.4rem 5rem rgba(33,26,58,.18); padding: 1.5rem; }
.ev-card__hd { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.ev-card__hd .ic { width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: var(--ev-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.ev-card__hd .lbl { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ev-muted); }
.ev-card__hd .live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; color: #0a8a7f; background: #e2f7f4; padding: .3rem .65rem; border-radius: 2rem; }
.ev-card__hd .live .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ev-teal); box-shadow: 0 0 0 0 rgba(16,183,166,.6); animation: evpulse 1.7s infinite; }
@keyframes evpulse { 70% { box-shadow: 0 0 0 .5rem rgba(16,183,166,0); } 100% { box-shadow: 0 0 0 0 rgba(16,183,166,0); } }
.ev-card__name { font-size: 1.35rem; font-weight: 800; color: var(--ev-ink); line-height: 1.2; }
.ev-card__date { font-size: .82rem; color: var(--ev-muted); margin-bottom: 1.1rem; }
.ev-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1.2rem; }
.ev-count > div { background: var(--ev-soft-2); border: 1px solid var(--ev-line); border-radius: .8rem; padding: .65rem .3rem; text-align: center; }
.ev-count b { display: block; font-size: 1.4rem; font-weight: 800; color: var(--ev); line-height: 1; }
.ev-count span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ev-muted); font-weight: 700; }
.ev-cmeta { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.15rem; }
.ev-cmeta .r { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }
.ev-cmeta .r i { width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: var(--ev-soft); color: var(--ev-3); display: flex; align-items: center; justify-content: center; flex: none; }
.ev-cmeta .r .k { color: var(--ev-muted); }
.ev-cmeta .r .v { margin-left: auto; font-weight: 800; color: var(--ev-ink); }
.ev-rsvp { flex: 1; height: .5rem; border-radius: 2rem; background: #eee7f6; overflow: hidden; margin: 0 .1rem; }
.ev-rsvp > i { display: block; height: 100%; width: 82%; border-radius: 2rem; background: var(--ev-grad-teal); }
.ev-tags { display: flex; gap: .5rem; border-top: 1px dashed var(--ev-line); padding-top: 1rem; }
.ev-tag { flex: 1; display: flex; align-items: center; gap: .4rem; justify-content: center; font-size: .72rem; font-weight: 800; padding: .5rem .3rem; border-radius: .7rem; }
.ev-tag i { font-size: .85rem; }
.ev-tag.mgmt { color: var(--ev-3); background: var(--ev-soft); }
.ev-tag.decor { color: #c62a63; background: #ffe7f0; }
.ev-tag.cater { color: #9a6a00; background: #fff3d6; }

/* floating chips */
.ev-chip { position: absolute; z-index: 3; background: #fff; border-radius: .9rem; box-shadow: 0 1rem 2.4rem rgba(33,26,58,.16); padding: .65rem .9rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--ev-line); animation: evfloat 5s ease-in-out infinite; }
.ev-chip .ic { width: 2rem; height: 2rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; flex: none; }
.ev-chip .ic--rsvp { background: var(--ev-grad-teal); }
.ev-chip .ic--star { background: var(--ev-grad-gold); }
.ev-chip b { display: block; font-size: .82rem; color: var(--ev-ink); line-height: 1.05; }
.ev-chip span { font-size: .68rem; color: var(--ev-muted); }
.ev-chip--tl { top: -1.9rem; left: -1.5rem; }
.ev-chip--br { bottom: -1.7rem; right: -1.2rem; animation-delay: 1.4s; }
@keyframes evfloat { 50% { transform: translateY(-10px); } }

/* ==========================================================================
   STAT STRIP
   ========================================================================== */
.ev-strip { background: var(--ev-grad); }
.ev-strip .s { text-align: center; padding: .4rem; color: #fff; }
.ev-strip .s i { font-size: 1.2rem; opacity: .92; }
.ev-strip .s b { display: block; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; line-height: 1; margin-top: .3rem; }
.ev-strip .s span { display: block; margin-top: .35rem; font-size: .82rem; color: rgba(255,255,255,.85); }
.ev-strip .col + .col .s { border-left: 1px solid rgba(255,255,255,.18); }
@media (max-width: 767px){ .ev-strip .col + .col .s { border-left: 0; } }

/* ==========================================================================
   THREE PILLARS
   ========================================================================== */
.ev-pillars { background: linear-gradient(180deg, #fff, var(--ev-soft-2)); }
.ev-pillar { position: relative; background: #fff; border: 1px solid var(--ev-line); border-radius: 1.5rem; padding: 2.2rem 1.9rem; height: 100%; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.ev-pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--pac); }
.ev-pillar::after { content: ""; position: absolute; right: -3rem; top: -3rem; width: 10rem; height: 10rem; border-radius: 50%; background: var(--pac-soft); opacity: .6; transition: opacity .35s ease; }
.ev-pillar:hover { transform: translateY(-.6rem); border-color: transparent; box-shadow: 0 2rem 4rem rgba(33,26,58,.14); }
.ev-pillar:hover::after { opacity: 1; }
.ev-pillar__ic { position: relative; z-index: 2; width: 4.2rem; height: 4.2rem; border-radius: 1.2rem; background: var(--pac); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; margin-bottom: 1.3rem; box-shadow: 0 .8rem 1.6rem var(--pac-sh); }
.ev-pillar__tag { position: relative; z-index: 2; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--pac-txt); margin-bottom: .35rem; }
.ev-pillar h3 { position: relative; z-index: 2; font-size: 1.4rem; font-weight: 800; color: var(--ev-ink); margin-bottom: .6rem; }
.ev-pillar > p { position: relative; z-index: 2; font-size: .92rem; color: var(--ev-muted); line-height: 1.6; margin-bottom: 1.2rem; }
.ev-plist { position: relative; z-index: 2; list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.ev-plist li { position: relative; padding-left: 1.7rem; font-size: .9rem; color: #40395a; line-height: 1.45; }
.ev-plist li::before { content: "\2713"; position: absolute; left: 0; top: .05rem; font-size: .7rem; font-weight: 800; color: #fff; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--pac); display: flex; align-items: center; justify-content: center; }
.ev-plink { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--pac-txt); text-decoration: none; }
.ev-plink:hover { color: var(--pac-txt); gap: .6rem; }
/* accents */
.ev-p-mgmt  { --pac: linear-gradient(120deg,#9d5cf5,#7c3aed); --pac-soft: #f2ecfe; --pac-sh: rgba(124,58,237,.34); --pac-txt: #6d28d9; }
.ev-p-decor { --pac: linear-gradient(120deg,#ff6fa3,#ff4d8d); --pac-soft: #ffe7f0; --pac-sh: rgba(255,77,141,.34); --pac-txt: #d81f66; }
.ev-p-cater { --pac: linear-gradient(120deg,#ffcb52,#f0a500); --pac-soft: #fff3d6; --pac-sh: rgba(240,165,0,.34); --pac-txt: #b07400; }

/* ==========================================================================
   FEATURES (capability tiles)
   ========================================================================== */
.ev-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ev-feat { background: #fff; border: 1px solid var(--ev-line); border-radius: 1.2rem; padding: 1.5rem; height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ev-feat:hover { transform: translateY(-.4rem); box-shadow: 0 1.4rem 3rem rgba(33,26,58,.1); border-color: transparent; }
.ev-feat .ic { width: 3rem; height: 3rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; margin-bottom: 1rem; }
.ev-feat h3 { font-size: 1.05rem; font-weight: 800; color: var(--ev-ink); margin-bottom: .4rem; }
.ev-feat p { font-size: .88rem; color: var(--ev-muted); margin: 0; line-height: 1.55; }
.ev-i1 { background: var(--ev-grad); } .ev-i2 { background: var(--ev-grad-pink); } .ev-i3 { background: var(--ev-grad-gold); }
.ev-i4 { background: var(--ev-grad-teal); } .ev-i5 { background: linear-gradient(120deg,#5b74f0,#3f57d6); } .ev-i6 { background: linear-gradient(120deg,#ff8a4c,#f2661a); }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.ev-steps { background: var(--ev-soft-2); }
.ev-stepline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ev-stepline::before { content: ""; position: absolute; left: 9%; right: 9%; top: 1.7rem; border-top: 2px dashed var(--ev-line); z-index: 0; }
.ev-step { position: relative; z-index: 1; text-align: center; padding: 0 .5rem; }
.ev-step .n { width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 auto 1.1rem; background: var(--ev-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; box-shadow: 0 .7rem 1.5rem rgba(124,58,237,.3); position: relative; }
.ev-step:nth-child(2) .n { background: var(--ev-grad-pink); box-shadow: 0 .7rem 1.5rem rgba(255,77,141,.3); }
.ev-step:nth-child(3) .n { background: var(--ev-grad-gold); box-shadow: 0 .7rem 1.5rem rgba(240,165,0,.3); }
.ev-step:nth-child(4) .n { background: var(--ev-grad-teal); box-shadow: 0 .7rem 1.5rem rgba(16,183,166,.3); }
.ev-step .s { position: absolute; top: -.3rem; right: -.3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; color: var(--ev-ink); font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 .2rem .5rem rgba(0,0,0,.15); }
.ev-step h4 { font-size: 1.05rem; font-weight: 800; color: var(--ev-ink); margin-bottom: .35rem; }
.ev-step p { font-size: .84rem; color: var(--ev-muted); margin: 0; line-height: 1.5; }

/* ==========================================================================
   CTA + LEAD FORM
   ========================================================================== */
.ev-cta { position: relative; background: var(--ev-ink); color: #fff; }
.ev-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 18% 0%, rgba(124,58,237,.45), transparent 60%), radial-gradient(700px 400px at 90% 100%, rgba(255,77,141,.32), transparent 60%); }
.ev-cta .container { position: relative; z-index: 2; }
.ev-cta h2 { color: #fff; font-size: clamp(1.9rem,3.2vw,2.6rem); }
.ev-cta .lead { color: #cabfe6; }
.ev-formcard { background: #fff; border-radius: 1.4rem; padding: 2rem; box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.28); }
.ev-formcard h3 { color: var(--ev-ink); }
.ev-formcard .form-control { border-radius: .7rem; }
.ev-ta { height: 120px; }
.ev-privacy { font-size: .78rem; color: var(--ev-muted); text-align: center; margin-top: .3rem; }
.ev-cta .trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-direction: column; gap: .8rem; }
.ev-cta .trust li { display: flex; align-items: center; gap: .7rem; color: #eae6f6; font-weight: 600; }
.ev-cta .trust li i { color: #b69cff; font-size: 1.2rem; }
.ev-callbox { margin-top: 1.8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; padding: 1.1rem 1.3rem; }
.ev-callbox b { color: #fff; }
.ev-callbox a { color: #d9c6ff; font-weight: 700; text-decoration: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .ev-fgrid { grid-template-columns: 1fr 1fr; }
    .ev-stepline { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
    .ev-stepline::before { display: none; }
}
@media (max-width: 767px) {
    .ev-fgrid { grid-template-columns: 1fr; }
    .ev-stepline { grid-template-columns: 1fr; }
    .ev-cardwrap { margin-top: 1rem; }
    .ev-chip { display: none; }
}