/* ══ Page-specific variables ══════════════════════════════ */
 :root {
     --ev-radius: 20px;
 }

 /* ══ Hero ═════════════════════════════════════════════════ */
 .ev-page-hero {
     padding: 130px 0 70px;
     background: var(--bg);
     position: relative;
     overflow: hidden;
 }

 .ev-hero-blob {
     position: absolute;
     top: -20%;
     right: -8%;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(249, 115, 22, 0.09), transparent 70%);
     pointer-events: none;
 }

 .ev-hero-blob2 {
     position: absolute;
     bottom: -10%;
     left: -10%;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(168, 85, 247, 0.07), transparent 70%);
     pointer-events: none;
 }

 .ev-hero-grid {
     position: absolute;
     inset: 0;
     pointer-events: none;
     opacity: .03;
     background-image: linear-gradient(var(--text) 1px, transparent 1px), linear-gradient(90deg, var(--text) 1px, transparent 1px);
     background-size: 52px 52px;
 }

 .ev-hero-inner {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 60px;
     align-items: center;
 }

 .ev-hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     border-radius: 999px;
     border: 1px solid rgba(249, 115, 22, .25);
     background: rgba(249, 115, 22, .08);
     color: var(--accent);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     margin-bottom: 20px;
 }

 .ev-hero-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--accent);
     animation: pulse 1.5s infinite;
 }

 .ev-hero-title {
     font-size: clamp(2.4rem, 5vw, 4rem);
     font-weight: 700;
     color: var(--text);
     line-height: 1.08;
     margin-bottom: 18px;
 }

 .ev-hero-sub {
     font-size: 1.1rem;
     color: var(--text2);
     line-height: 1.72;
     margin-bottom: 32px;
     max-width: 540px;
 }

 .ev-hero-pills {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 36px;
 }

 .ev-hero-pill {
     padding: 7px 18px;
     border-radius: 999px;
     border: 1px solid var(--border);
     background: var(--bg-card);
     font-size: 13px;
     font-weight: 600;
     color: var(--text2);
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .ev-hero-stats {
     display: flex;
     gap: 32px;
     padding-top: 32px;
     border-top: 1px solid var(--border);
 }

 .ev-hero-stat-num {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 700;
     color: var(--text);
     display: block;
     line-height: 1;
     margin-bottom: 4px;
 }

 .ev-hero-stat-lbl {
     font-size: 12px;
     color: var(--text3);
 }

 /* Featured event card */
 .ev-featured-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--ev-radius);
     overflow: hidden;
     position: sticky;
     top: 100px;
     box-shadow: var(--shadow-lg);
 }

 .ev-featured-thumb {
     height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 6rem;
     position: relative;
     overflow: hidden;
 }

 .ev-featured-thumb-emoji {
     transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
     position: relative;
     z-index: 1;
 }

 .ev-featured-card:hover .ev-featured-thumb-emoji {
     transform: scale(1.12) rotate(-5deg);
 }

 .ev-featured-live {
     position: absolute;
     top: 14px;
     right: 14px;
     z-index: 2;
     background: rgba(239, 68, 68, .9);
     border-radius: 999px;
     padding: 5px 13px;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .ev-live-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #fff;
     animation: pulse 1.1s infinite;
 }

 .ev-featured-body {
     padding: 26px;
 }

 .ev-featured-title {
     font-family: var(--font-display);
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 12px;
     line-height: 1.35;
     letter-spacing: .5px;
 }

 .ev-featured-meta {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 20px;
 }

 .ev-featured-meta span {
     font-size: 13px;
     color: var(--text2);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .cd-row {
     display: flex;
     gap: 12px;
     margin-bottom: 22px;
 }

 .cd-box {
     flex: 1;
     text-align: center;
     padding: 10px 8px;
     background: var(--bg-overlay, rgba(255, 255, 255, .04));
     border: 1px solid var(--border);
     border-radius: 10px;
 }

 .cd-num {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--text);
     display: block;
     line-height: 1;
 }

 .cd-lbl {
     font-size: 9px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--text3);
 }

 /* ══ Section helpers ══════════════════════════════════════ */
 .sec-head-row {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     margin-bottom: 40px;
     flex-wrap: wrap;
     gap: 16px;
 }

 .sec-head-row .section-tag {
     margin-bottom: 10px;
 }

 /* ══ Event cards (grid) ═══════════════════════════════════ */
 .ev-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
 }

 .ev-grid-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--ev-radius);
     overflow: hidden;
     transition: var(--transition);
     position: relative;
 }

 .ev-grid-card:hover {
     transform: translateY(-8px);
     border-color: var(--border-h);
     box-shadow: var(--shadow-lg);
 }

 .ev-grid-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s cubic-bezier(.16, 1, .3, 1);
 }

 .ev-grid-card:hover::after {
     transform: scaleX(1);
 }

 .ev-gc-thumb {
     height: 190px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 5rem;
     position: relative;
     overflow: hidden;
 }

 .ev-gc-emoji {
     transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
     position: relative;
     z-index: 1;
 }

 .ev-grid-card:hover .ev-gc-emoji {
     transform: scale(1.18) rotate(-6deg);
 }

 .ev-gc-date {
     position: absolute;
     top: 13px;
     left: 13px;
     z-index: 2;
     background: rgba(0, 0, 0, .6);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, .15);
     border-radius: 10px;
     padding: 6px 12px;
     text-align: center;
     color: #fff;
 }

 .ev-gc-day {
     font-family: var(--font-display);
     font-size: 1.6rem;
     font-weight: 700;
     line-height: 1;
     display: block;
 }

 .ev-gc-month {
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .1em;
     opacity: .8;
 }

 .ev-gc-free {
     position: absolute;
     top: 13px;
     right: 13px;
     z-index: 2;
     background: rgba(34, 197, 94, .85);
     backdrop-filter: blur(6px);
     color: #fff;
     border-radius: 999px;
     padding: 3px 10px;
     font-size: 11px;
     font-weight: 700;
 }

 .ev-gc-body {
     padding: 20px 22px 24px;
 }

 .ev-gc-type {
     display: inline-block;
     padding: 3px 11px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .ev-gc-title {
     font-family: var(--font-display);
     font-size: 1rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 12px;
     line-height: 1.4;
     letter-spacing: .5px;
 }

 .ev-gc-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 16px;
 }

 .ev-gc-meta span {
     font-size: 12px;
     color: var(--text3);
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .ev-gc-foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 14px;
     border-top: 1px solid var(--border);
 }

 .ev-gc-seats {
     font-size: 12px;
     color: var(--text3);
 }

 .ev-gc-price-free {
     font-family: var(--font-display);
     font-size: .95rem;
     font-weight: 700;
     color: #22c55e;
 }

 .ev-gc-price-paid {
     font-family: var(--font-display);
     font-size: .95rem;
     font-weight: 700;
     color: var(--text);
 }

 /* ══ Resource Hub ═════════════════════════════════════════ */
 .res-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
 }

 .res-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--ev-radius);
     padding: 28px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .res-card:hover {
     transform: translateY(-6px);
     border-color: var(--border-h);
     box-shadow: var(--shadow-md);
 }

 .res-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .4s cubic-bezier(.16, 1, .3, 1);
 }

 .res-card:hover::before {
     transform: scaleX(1);
 }

 .res-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     margin-bottom: 18px;
 }

 .res-tag {
     display: inline-block;
     padding: 3px 11px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .res-title {
     font-family: var(--font-display);
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 10px;
 }

 .res-desc {
     font-size: 13px;
     color: var(--text2);
     line-height: 1.7;
     margin-bottom: 20px;
 }

 .res-files {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 20px;
 }

 .res-file {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 9px 14px;
     border-radius: 10px;
     background: var(--bg2);
     border: 1px solid var(--border);
     font-size: 13px;
     color: var(--text2);
     transition: var(--transition);
 }

 .res-file:hover {
     border-color: var(--accent);
     color: var(--text);
 }

 .res-file-name {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .res-file-size {
     font-size: 11px;
     color: var(--text3);
 }

 .res-dl-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 8px 16px;
     border-radius: 10px;
     background: rgba(249, 115, 22, .1);
     color: var(--accent);
     font-size: 12px;
     font-weight: 700;
     border: 1px solid rgba(249, 115, 22, .2);
     transition: var(--transition);
     text-decoration: none;
 }

 .res-dl-btn:hover {
     background: var(--accent);
     color: #fff;
 }

 /* ══ Practice Section (Questionaires) ════════════════════ */
 .prac-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
 }

 .prac-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--ev-radius);
     padding: 24px;
     transition: var(--transition);
     text-align: center;
 }

 .prac-card:hover {
     transform: translateY(-6px);
     border-color: var(--border-h);
     box-shadow: var(--shadow-md);
 }

 .prac-icon {
     font-size: 2.6rem;
     margin-bottom: 14px;
 }

 .prac-count {
     font-family: var(--font-display);
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 4px;
 }

 .prac-label {
     font-size: 13px;
     color: var(--text2);
     margin-bottom: 14px;
     font-weight: 500;
 }

 .prac-diff {
     font-size: 11px;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 999px;
     display: inline-block;
     margin-bottom: 16px;
 }

 /* ══ Speakers ════════════════════════════════════════════ */
 .spk-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
 }

 .spk-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--ev-radius);
     padding: 24px;
     text-align: center;
     transition: var(--transition);
 }

 .spk-card:hover {
     transform: translateY(-6px);
     border-color: var(--border-h);
     box-shadow: var(--shadow-md);
 }

 .spk-avatar {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     margin: 0 auto 14px;
     background: linear-gradient(135deg, #f97316, #ec4899);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 22px;
     box-shadow: 0 4px 20px rgba(249, 115, 22, .3);
 }

 .spk-name {
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 4px;
     letter-spacing: .5px;
 }

 .spk-role {
     font-size: 12px;
     color: var(--text3);
     margin-bottom: 12px;
 }

 .spk-tag {
     display: inline-block;
     padding: 3px 10px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 700;
 }

 .ev-grid-card:nth-child(1)::after {
     background: linear-gradient(90deg, #8b5cf6, #ec4899);
 }

 /* Responsive */
 @media(max-width:1024px) {
     .ev-hero-inner {
         grid-template-columns: 1fr;
     }

     .ev-featured-card {
         position: static;
         margin-top: 36px;
     }

     .ev-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .res-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .prac-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .spk-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width:640px) {
     .ev-grid {
         grid-template-columns: 1fr;
     }

     .res-grid {
         grid-template-columns: 1fr;
     }

     .prac-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .spk-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .ev-hero-stats {
         flex-wrap: wrap;
         gap: 20px;
     }
 }


 /* ── Modal Overlay ─────────────────────────────────────────── */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
     padding: 20px;
 }

 .modal-overlay.open {
     opacity: 1;
     visibility: visible;
 }

 /* ── Modal Card ───────────────────────────────────────────── */
 .modal-card {
     background: var(--bg2, #fff);
     border: 1px solid var(--border, #e5e7eb);
     border-radius: var(--radius-xl, 12px);
     width: 100%;
     max-width: 480px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(249, 115, 22, 0.1);
     overflow: hidden;
     transform: translateY(28px) scale(0.96);
     transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .modal-overlay.open .modal-card {
     transform: translateY(0) scale(1);
 }

 /* Top strip gradient */
 .modal-strip {
     height: 5px;
     background: var(--grad, #f97316);
     background-size: 200%;
     animation: gradShift 3s linear infinite;
 }

 /* Inner padding */
 .modal-inner {
     padding: 36px;
 }

 /* Header */
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 28px;
 }

 .modal-eyebrow {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent, #f97316);
     margin-bottom: 6px;
 }

 .modal-title {
     font-family: var(--font-display, 'Inter'), sans-serif;
     font-size: 26px;
     font-weight: 800;
     color: var(--text, #111827);
     line-height: 1.15;
 }

 .modal-title span {
     display: block;
 }

 .modal-close {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 1px solid var(--border, #d1d5db);
     background: var(--bg3, #f9fafb);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--text2, #6b7280);
     font-size: 16px;
     transition: 0.3s ease;
 }

 .modal-close:hover {
     transform: rotate(90deg);
     color: var(--text, #111827);
     border-color: var(--border-h, #9ca3af);
 }

 /* Course Badge */
 .course-badge {
     display: flex;
     align-items: center;
     gap: 10px;
     background: var(--bg3, #f3f4f6);
     border: 1px solid var(--border, #e5e7eb);
     border-left: 3px solid var(--accent, #f97316);
     border-radius: var(--radius-md, 8px);
     padding: 12px 16px;
     margin-bottom: 24px;
 }

 .badge-icon {
     width: 36px;
     height: 36px;
     border-radius: var(--radius-sm, 6px);
     background: var(--grad, #f97316);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 17px;
 }

 .badge-label {
     font-size: 10px;
     color: var(--text3, #6b7280);
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: 2px;
 }

 .badge-course {
     font-family: var(--font-display, 'Inter'), sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: var(--text, #111827);
 }

 /* Form fields */
 .form-grid {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .field-wrap {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .field-label {
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     color: var(--text2, #6b7280);
 }

 .field-label span {
     color: var(--accent, #f97316);
     margin-left: 2px;
 }

 .field-input-wrap {
     position: relative;
 }

 .field-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-35%);
     color: var(--text3, #9ca3af);
     pointer-events: none;
 }

 .field-input {
     width: 100%;
     padding: 13px 14px 13px 40px;
     border-radius: var(--radius-md, 6px);
     border: 1px solid var(--border, #e5e7eb);
     font-size: 14px;
     color: var(--text, #111827);
     background: var(--bg3, #f9fafb);
     outline: none;
     transition: 0.25s;
 }

 .field-input::placeholder {
     color: var(--text3, #9ca3af);
 }

 .field-input:focus {
     border-color: var(--accent, #f97316);
     box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
     background: var(--bg2, #fff);
 }

 .field-input:focus+.field-icon,
 .field-input-wrap:focus-within .field-icon {
     color: var(--accent, #f97316);
 }

 .field-input[readonly] {
     cursor: default;
     background: var(--bg3, #f3f4f6);
 }

 /* 2-col row */
 .field-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }

 @media(max-width:400px) {
     .field-row {
         grid-template-columns: 1fr;
     }
 }

 /* Submit button */
 .submit-btn {
     width: 100%;
     padding: 15px;
     background: var(--grad, #f97316);
     border: none;
     border-radius: var(--radius-md, 6px);
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     cursor: pointer;
     transition: 0.25s;
 }

 .submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
 }

 /* Success overlay */
 .success-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     opacity: 0;
     visibility: hidden;
     transition: 0.45s ease-out;
     padding: 48px 40px;
     z-index: 10;
 }

 .success-overlay.show {
     opacity: 1;
     visibility: visible;
 }

 /* Confetti pop */
 .success-icon,
 .success-confetti,
 .success-title,
 .success-msg,
 .success-close {
     animation: popIn 0.55s ease forwards;
 }

 @keyframes popIn {
     0% {
         transform: scale(0);
         opacity: 0;
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 /* Footer note */
 .modal-note {
     font-size: 12px;
     color: var(--text3, #6b7280);
     text-align: center;
     margin-top: 16px;
 }

 .modal-note a {
     color: var(--accent, #f97316);
     text-decoration: none;
 }

 .modal-note a:hover {
     text-decoration: underline;
 }