/* =====================================================================
   INDEX.CSS — Automation India Expo 2027 (Home page)
   Load LAST, after style.css / navbar.css / hero.css / sections.css /
   animations.css / footer.css

   <link rel="stylesheet" href="css/index.css">

   Contains:
   1. Page tokens
   2. Shared reveal + stagger helpers
   3. REASONS TO EXHIBIT  — icons drawn in CSS (no icon-font dependency)
   4. FEATURED ZONE       — Assembly Automation
   5. Responsive
   6. Accessibility / reduced motion
   ===================================================================== */


/* =====================================================================
   1. PAGE TOKENS
   ===================================================================== */
:root {
    --navy:        #0A1650;
    --navy-deep:   #07091A;
    --gold:        #FFD700;
    --gold-soft:   #FFE44A;
    --red:         #E63B2E;
    --ink:         #0A1650;
    --muted:       #6B7280;

    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =====================================================================
   2. REVEAL + STAGGER (scroll animations)
   ===================================================================== */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    will-change: opacity, transform;
}

.reveal        { transform: translateY(38px); }
.reveal-left   { transform: translateX(-46px); }
.reveal-right  { transform: translateX(46px); }
.reveal-scale  { transform: scale(0.94); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal.active,
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active,
.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view {
    opacity: 1;
    transform: none;
}

/* Delay applies on entry only, so resets snap back instantly */
.visible.stagger-1 { transition-delay: 0.08s; }
.visible.stagger-2 { transition-delay: 0.16s; }
.visible.stagger-3 { transition-delay: 0.24s; }
.visible.stagger-4 { transition-delay: 0.32s; }
.visible.stagger-5 { transition-delay: 0.40s; }

.stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5 { transition-delay: 0s; }

/* Safety net: if the IntersectionObserver script never runs,
   nothing should stay invisible. */
.no-js .reveal,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale {
    opacity: 1;
    transform: none;
}


/* =====================================================================
   3. REASONS TO EXHIBIT
   ---------------------------------------------------------------------
   The <i class="ti ti-*"> glyphs were blank because the Tabler webfont
   was not resolving. These rules draw each icon from an inline SVG mask,
   so the icons render with zero external requests. The <i> element is
   kept (harmless) but its glyph is suppressed.
   ===================================================================== */

.why-visit-dark {
    position: relative;
    padding: clamp(64px, 8vw, 100px) 5% clamp(56px, 6vw, 80px);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(255, 215, 0, 0.07), transparent 60%),
        var(--navy);
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Ambient orbs --- */
.why-visit-dark .wv-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.55;
}

.why-visit-dark .wv-orb-1 {
    width: 480px; height: 480px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.20), transparent 70%);
    animation: wvDrift 18s ease-in-out infinite;
}

.why-visit-dark .wv-orb-2 {
    width: 400px; height: 400px;
    bottom: -120px; right: -100px;
    background: radial-gradient(circle, rgba(230, 59, 46, 0.18), transparent 70%);
    animation: wvDrift 22s ease-in-out infinite reverse;
}

.why-visit-dark .wv-orb-3 {
    width: 320px; height: 320px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(7, 9, 26, 0.55), transparent 70%);
}

@keyframes wvDrift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(30px, -24px); }
}

.wv-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* --- Header --- */
.wv-header {
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 56px);
}

.wv-header h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(28px, 4vw, 50px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

/* Gold rule under the heading */
.wv-header h2::after {
    content: '';
    display: block;
    width: 68px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--red));
}

.wv-header p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
}

.wv-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 215, 0, 0.10);
    border: 1px solid rgba(255, 215, 0, 0.30);
    border-radius: 50px;
    padding: 6px 20px;
    margin-bottom: 20px;
}

/* --- Grid --- */
.wv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* --- Card --- */
.wv-card {
    position: relative;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.4s var(--ease-out),
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Shine sweep */
.wv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
    pointer-events: none;
    z-index: -1;
}

.wv-card:hover {
    background: #fff;
    border-color: transparent;
    transform: translateY(-8px);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.85);
}

.wv-card:hover::before { transform: translateX(100%); }

.wv-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Icon tile --- */
.wv-icon {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.20);
    transition:
        transform 0.45s var(--ease-spring),
        background 0.35s ease,
        border-color 0.35s ease;
}

/* Suppress the webfont glyph — the mask below is the real icon */
.wv-icon i {
    font-size: 0 !important;
    line-height: 0;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* The icon itself: an SVG mask painted with currentColor */
.wv-icon::after {
    content: '';
    width: 26px;
    height: 26px;
    background-color: #fff;
    -webkit-mask: var(--wv-svg) center / contain no-repeat;
            mask: var(--wv-svg) center / contain no-repeat;
    transition: background-color 0.3s ease;
}

/* Accent tints */
.wv-icon.gold { box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.18); }
.wv-icon.red  { box-shadow: inset 0 0 0 1px rgba(230, 59, 46, 0.18); }

/* Hover: card turns white, icon turns navy */
.wv-card:hover .wv-icon {
    background: rgba(10, 22, 80, 0.07);
    border-color: rgba(10, 22, 80, 0.18);
    transform: rotate(-8deg) scale(1.08);
}

.wv-card:hover .wv-icon.gold {
    background: rgba(255, 215, 0, 0.16);
    border-color: rgba(255, 215, 0, 0.55);
}

.wv-card:hover .wv-icon.red {
    background: rgba(230, 59, 46, 0.12);
    border-color: rgba(230, 59, 46, 0.45);
}

.wv-card:hover .wv-icon::after { background-color: var(--navy); }

/* ---------------------------------------------------------------------
   ICON ARTWORK
   Primary mapping is by card position (works everywhere).
   The :has() block below re-maps by icon class, so the icons stay
   correct even if you reorder or add cards.
   --------------------------------------------------------------------- */

/* 01 — Unmatched Industry Exposure → skyscraper */
.wv-grid > .wv-card:nth-child(1) .wv-icon,
.wv-icon.icon-exposure {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7.2L13 3v18'/%3E%3Cpath d='M19 21V11.4L13 7.8'/%3E%3Cpath d='M8.6 9.6v.01M8.6 12.6v.01M8.6 15.6v.01M8.6 18.4v.01'/%3E%3Cpath d='M16 14v.01M16 17v.01'/%3E%3C/svg%3E");
}

/* 02 — Premium Networking Platform → people */
.wv-grid > .wv-card:nth-child(2) .wv-icon,
.wv-icon.icon-network {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.4'/%3E%3Cpath d='M3 20v-1.1A4.9 4.9 0 0 1 7.9 14h3.2a4.9 4.9 0 0 1 4.9 4.9V20'/%3E%3Cpath d='M16.2 5.2a3.4 3.4 0 0 1 0 6.6'/%3E%3Cpath d='M21 20v-1.1a4.9 4.9 0 0 0-3.2-4.6'/%3E%3C/svg%3E");
}

/* 03 — Live Technology Demonstrations → camera */
.wv-grid > .wv-card:nth-child(3) .wv-icon,
.wv-icon.icon-live {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.4L17.4 3.2l1.7 6L4.3 13.4z'/%3E%3Cpath d='M19.1 9.2L22 8.4'/%3E%3Cpath d='M11.5 11.7v3.6a3.4 3.4 0 0 1-3.4 3.4H6.4'/%3E%3Ccircle cx='6' cy='19.4' r='1.9'/%3E%3C/svg%3E");
}

/* 04 — Product Discovery Hub → lightbulb */
.wv-grid > .wv-card:nth-child(4) .wv-icon,
.wv-icon.icon-discovery {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.7 11.2c.7.5 1.1 1.3 1.1 2.1h5.2c0-.8.4-1.6 1.1-2.1A6.2 6.2 0 0 0 12 2.8z'/%3E%3Cpath d='M9.4 18.6h5.2'/%3E%3Cpath d='M10.4 21.2h3.2'/%3E%3C/svg%3E");
}

/* 05 — Gateway To India's Automation Market → globe */
.wv-grid > .wv-card:nth-child(5) .wv-icon,
.wv-icon.icon-gateway {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.2 9.6h17.6M3.2 14.4h17.6'/%3E%3Cpath d='M12 3a15.5 15.5 0 0 1 0 18'/%3E%3Cpath d='M12 3a15.5 15.5 0 0 0 0 18'/%3E%3C/svg%3E");
}

/* 06 — Business & Partnership Opportunities → handshake */
.wv-grid > .wv-card:nth-child(6) .wv-icon,
.wv-icon.icon-partnership {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 7.6L9.3 9.9a2.1 2.1 0 0 0 3 3l2.1-2.1'/%3E%3Cpath d='M14.4 10.8l3.9 3.9a1.7 1.7 0 0 1-2.4 2.4l-.6-.6'/%3E%3Cpath d='M15.3 16.5a1.7 1.7 0 0 1-2.4 2.4l-.7-.7'/%3E%3Cpath d='M12.2 18.2a1.7 1.7 0 0 1-2.4 2.4L7 17.8'/%3E%3Cpath d='M2.5 8.6l3.6-3.6h3.3l2.2 2.6'/%3E%3Cpath d='M21.5 8.6L17.9 5h-3l-1.5 1.4'/%3E%3C/svg%3E");
}

/* Class-based mapping (overrides position mapping where supported) */
.wv-grid .wv-card .wv-icon:has(.ti-building-skyscraper) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7.2L13 3v18'/%3E%3Cpath d='M19 21V11.4L13 7.8'/%3E%3Cpath d='M8.6 9.6v.01M8.6 12.6v.01M8.6 15.6v.01M8.6 18.4v.01'/%3E%3Cpath d='M16 14v.01M16 17v.01'/%3E%3C/svg%3E");
}
.wv-grid .wv-card .wv-icon:has(.ti-users-group) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.4'/%3E%3Cpath d='M3 20v-1.1A4.9 4.9 0 0 1 7.9 14h3.2a4.9 4.9 0 0 1 4.9 4.9V20'/%3E%3Cpath d='M16.2 5.2a3.4 3.4 0 0 1 0 6.6'/%3E%3Cpath d='M21 20v-1.1a4.9 4.9 0 0 0-3.2-4.6'/%3E%3C/svg%3E");
}
.wv-grid .wv-card .wv-icon:has(.ti-device-cctv) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 7.4L17.4 3.2l1.7 6L4.3 13.4z'/%3E%3Cpath d='M19.1 9.2L22 8.4'/%3E%3Cpath d='M11.5 11.7v3.6a3.4 3.4 0 0 1-3.4 3.4H6.4'/%3E%3Ccircle cx='6' cy='19.4' r='1.9'/%3E%3C/svg%3E");
}
.wv-grid .wv-card .wv-icon:has(.ti-bulb) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8a6.2 6.2 0 0 0-3.7 11.2c.7.5 1.1 1.3 1.1 2.1h5.2c0-.8.4-1.6 1.1-2.1A6.2 6.2 0 0 0 12 2.8z'/%3E%3Cpath d='M9.4 18.6h5.2'/%3E%3Cpath d='M10.4 21.2h3.2'/%3E%3C/svg%3E");
}
.wv-grid .wv-card .wv-icon:has(.ti-world) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.2 9.6h17.6M3.2 14.4h17.6'/%3E%3Cpath d='M12 3a15.5 15.5 0 0 1 0 18'/%3E%3Cpath d='M12 3a15.5 15.5 0 0 0 0 18'/%3E%3C/svg%3E");
}
.wv-grid .wv-card .wv-icon:has(.ti-handshake) {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.6 7.6L9.3 9.9a2.1 2.1 0 0 0 3 3l2.1-2.1'/%3E%3Cpath d='M14.4 10.8l3.9 3.9a1.7 1.7 0 0 1-2.4 2.4l-.6-.6'/%3E%3Cpath d='M15.3 16.5a1.7 1.7 0 0 1-2.4 2.4l-.7-.7'/%3E%3Cpath d='M12.2 18.2a1.7 1.7 0 0 1-2.4 2.4L7 17.8'/%3E%3Cpath d='M2.5 8.6l3.6-3.6h3.3l2.2 2.6'/%3E%3Cpath d='M21.5 8.6L17.9 5h-3l-1.5 1.4'/%3E%3C/svg%3E");
}

/* Fallback so a tile is never blank if a card has no mapping */
.wv-icon {
    --wv-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

/* --- Number badge --- */
.wv-num {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.18);
    transition: color 0.3s ease;
}

.wv-card:hover .wv-num { color: rgba(10, 22, 80, 0.25); }

/* --- Card text --- */
.wv-card h3 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.32;
    color: #fff;
    margin: 4px 0 0;
    transition: color 0.3s ease;
}

.wv-card p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    transition: color 0.3s ease;
}

.wv-card p strong {
    color: var(--gold);
    font-weight: 700;
    transition: color 0.3s ease;
}

.wv-card:hover h3        { color: var(--navy); }
.wv-card:hover p         { color: #4A4A5C; }
.wv-card:hover p strong  { color: var(--red); }

/* --- Accent bar --- */
.wv-bar {
    height: 3px;
    width: 42px;
    border-radius: 3px;
    margin-top: auto;
    transition: width 0.45s var(--ease-out), background 0.3s ease;
}

.wv-bar.gold { background: linear-gradient(90deg, var(--gold), rgba(255, 215, 0, 0.25)); }
.wv-bar.red  { background: linear-gradient(90deg, var(--red),  rgba(230, 59, 46, 0.25)); }

.wv-card:hover .wv-bar { width: 78px; }


/* =====================================================================
   4. FEATURED ZONE: ASSEMBLY AUTOMATION
   ===================================================================== */

.featured-assembly-zone {
    position: relative;
    padding: clamp(56px, 7vw, 88px) 0 clamp(56px, 7vw, 84px);
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F7FB 55%, #FFFFFF 100%);
    overflow: hidden;
}

/* Faint grid texture */
.featured-assembly-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(10, 22, 80, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 80, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
            mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    pointer-events: none;
}

.faz-wrapper {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
}

/* --- Content (Left) --- */
.faz-tag {
    background: rgba(10, 22, 80, 0.06);
    border: 1px solid rgba(10, 22, 80, 0.15);
    color: var(--navy);
    letter-spacing: 0.18em;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
}

.faz-content h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(32px, 4vw, 46px);
    font-weight: 700;
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 16px;
}

.faz-divider {
    width: 68px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--red));
    margin-bottom: 24px;
}

.faz-content p {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 28px;
}

.faz-features {
    list-style: none;
    padding: 0;
    margin: 0 0 36px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.faz-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    color: var(--navy);
    font-weight: 600;
}

.faz-features li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-radius: 50%;
    background-color: var(--gold);
    box-shadow: inset 0 0 0 20px var(--gold);
}

.faz-btn {
    display: inline-block;
    background: var(--navy);
    color: var(--gold);
    padding: 14px 28px;
    border-radius: 12px;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.faz-btn:hover {
    background: #0d1e6b;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(10, 22, 80, 0.2);
    color: #fff;
}

/* --- Image (Right) --- */
.faz-image {
    position: relative;
}

.faz-image-inner {
    position: relative;
    border-radius: 22px;
    z-index: 2;
}

.faz-image-inner::before {
    content: '';
    position: absolute;
    right: -16px;
    top: -16px;
    width: 50%;
    height: 50%;
    border-top: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    border-radius: 0 22px 0 0;
    z-index: -1;
}

.faz-image-inner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 24px 54px rgba(10, 22, 80, 0.12);
}

.faz-glass-badge {
    position: absolute;
    bottom: -18px;
    left: -18px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faz-glass-badge span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
    font-weight: 700;
}

.faz-glass-badge strong {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 28px;
    color: var(--navy);
    line-height: 1;
}

/* --- Responsive Layout for Featured Zone --- */
@media (max-width: 992px) {
    .faz-wrapper {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .faz-image {
        order: -1;
        padding-right: 16px;
        padding-top: 16px;
    }
}

@media (max-width: 600px) {
    .faz-features {
        grid-template-columns: 1fr;
    }
    .faz-glass-badge {
        left: -8px;
        bottom: -8px;
        padding: 12px 18px;
    }
    .faz-glass-badge strong {
        font-size: 22px;
    }
}


/* =====================================================================
   5. RESPONSIVE
   ===================================================================== */

@media (max-width: 1200px) {
    .wv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .why-visit-dark { padding: 56px 20px 48px; }
    .wv-grid        { grid-template-columns: 1fr; gap: 14px; }
    .wv-card        { padding: 24px 22px; }
    .wv-card:hover  { transform: none; }
}

@media (max-width: 480px) {
    .wv-icon   { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
    .wv-icon::after { width: 23px; height: 23px; }
    .wv-card h3 { font-size: 16px; }
}


/* =====================================================================
   6. ACCESSIBILITY
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .why-visit-dark .wv-orb { animation: none; }

    .wv-card, .wv-icon {
        transition: none !important;
    }

    .faz-btn, .faz-image-inner img { 
        transition: none !important; 
    }
}

/* Keyboard focus for cards */
.wv-card:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

/* Print */
@media print {
    .why-visit-dark { background: #fff; color: #000; }
    .wv-card h3, .wv-card p { color: #000; }
    .wv-orb { display: none; }
}


/* =====================================================================
   7. DENSITY PASS — tighter vertical rhythm
   ---------------------------------------------------------------------
   Every section's top/bottom padding cut ~30–40%. One knob per section
   so you can dial any single band back up without touching the rest.
   ===================================================================== */

.about-expo            { padding: 40px 5% 0; }
.stats-frontier        { padding: 40px 5% 36px; }
.memory-lane-style     { padding: 36px 0 32px; }
.exhibitors-section    { padding: 36px 0 32px; }
.why-visit-dark        { padding: 44px 5% 40px; }
.featured-assembly-zone { padding: 40px 0 36px; }
.expect-flip-section   { padding: 48px 0; }
.ts-section            { padding: 44px 0; }
.section-padding       { padding: 36px 0 32px; }
.contact-section       { padding: 32px 0; }
.sponsor-section       { padding: 36px 5%; }
.gold-partners-section { padding: 14px 0; }
.associations-section  { padding: 34px 0 30px; }

/* --- Header-to-content gaps --- */
.wv-header                        { margin-bottom: 30px; }
.wv-grid                          { margin-bottom: 0; }
.memory-header                    { margin-bottom: 24px; }
.stats-headline                   { margin-bottom: 28px; }
.expect-flip-heading              { margin-bottom: 30px; }
.section-heading                  { margin-bottom: 26px; }
.section-header                   { margin-bottom: 24px; }
.home-heading-center-wrapper      { margin-bottom: 22px; }

/* Heading rules sit closer to the text they underline */
.wv-header h2::after { margin-top: 14px; }


/* =====================================================================
   8. HEADING WEIGHT — 800 → 700
   Section headings only. Eyebrows, stat numbers, chips and buttons keep
   their 800 because they are small and need the extra weight to read.
   ===================================================================== */

h1, h2, h3, h4, h5,
.section-header h2,
.section-heading h2,
.section-title h1,
.wv-header h2,
.wv-card h3,
.memory-header h2,
.expect-flip-heading h2,
.expect-flip-back h3,
.expect-flip-front-content h3,
.ts-heading,
.home-heading-center,
.gold-left h2,
.footer-title,
.partner-block h4 {
    font-weight: 700 !important;
}

/* Keep the hero wordmark heavy — delete this block if you want it at 700 too */
.hero-content h1 { font-weight: 800 !important; }


/* --- Mobile: tighten further --- */
@media (max-width: 768px) {
    .about-expo            { padding: 30px 5% 0; }
    .stats-frontier        { padding: 30px 5% 28px; }
    .memory-lane-style,
    .exhibitors-section,
    .section-padding       { padding: 28px 0 24px; }
    .why-visit-dark        { padding: 34px 20px 30px; }
    .featured-assembly-zone { padding: 30px 0 28px; }
    .expect-flip-section   { padding: 34px 0; }
    .ts-section            { padding: 32px 0; }
    .contact-section       { padding: 24px 0; }
    .sponsor-section       { padding: 28px 5%; }
    .associations-section  { padding: 26px 0 24px; }

    .wv-header             { margin-bottom: 22px; }
    .section-heading,
    .section-header        { margin-bottom: 20px; }
}


/* =====================================================================
   9. CONTACT — GITEX reskin
   ===================================================================== */

/* =====================================================================
   9. CONTACT — COMPACT LAYOUT
   ===================================================================== */

.contact-section {
    position: relative;
    background: #FFFFFF;
    overflow: hidden;
    padding: 24px 0; /* Add a little padding top/bottom */
}

/* Faint floor-plan grid */
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(10, 22, 80, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 22, 80, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
            mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
    pointer-events: none;
}

.contact-container {
    position: relative;
    z-index: 1;
    width: min(960px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    gap: 30px; 
    grid-template-columns: 1fr 1fr; /* This makes both sides exactly equal */
}

/* ---------- Left: image with a gold bracket ---------- */
.contact-image {
    position: relative;
    border-radius: 18px;
}

/* Signature: an offset gold L-bracket behind the photo */
.contact-image::before {
    content: '';
    position: absolute;
    left: -12px;
    bottom: -12px;
    width: 40%;
    height: 40%;
    border-left: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    border-radius: 0 0 0 18px;
    z-index: -1;
}

.contact-image img {
    height: 100%;
    min-height: 380px; /* REDUCED height */
    width: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* ---------- Right: form card ---------- */
.contact-form-area {
    min-height: 380px; /* REDUCED height */
    padding: 24px 30px; /* REDUCED padding */
    border-radius: 18px;
    border: 1px solid #E9EBF2;
    background: #FFFFFF;
    box-shadow: 0 14px 40px rgba(10, 22, 80, 0.06);
    display: flex;
    flex-direction: column;
}

/* "CONTACT US" pill */
.contact-form-area .section-tag {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: var(--navy);
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    align-self: flex-start; 
    padding: 5px 14px;      
    border-radius: 50px;    
    font-size: 10px; /* Smaller text */
    font-weight: 700;
    display: inline-block;
}

.contact-form-area h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: clamp(22px, 2.2vw, 28px); /* SMALLER HEADING */
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 0 0 8px;
}

.contact-form-area h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    margin-top: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--red));
}

.contact-form-area form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ---------- Fields ---------- */
.form-grid { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* TIGHTER SPACING between inputs */
}
.field-full { grid-column: span 2; }

.field input,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #E5E7EF;
    border-radius: 10px;
    background: #F7F8FB;
    color: var(--navy);
    font-size: 13px;
    padding: 10px 14px;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.field input { height: 42px; } /* THINNER inputs */

.field textarea {
    height: 75px;      /* SMALLER text box */
    min-height: 75px; 
    padding-top: 12px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9AA0B4;
    font-size: 13px;
}

.field input:hover,
.field textarea:hover { border-color: #D4D8E6; }

.field input:focus,
.field textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22);
}

/* ---------- Consent ---------- */
.consent {
    margin: 14px 0 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 18px;
    border: 1.5px solid #D4D8E6;
    border-radius: 5px;
    background: #F7F8FB;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.consent input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}

.consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid var(--navy);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.consent label {
    color: #5A6076;
    font-size: 11.5px;
    line-height: 1.45;
    cursor: pointer;
}

/* ---------- Submit ---------- */
.submit-btn {
    width: 100%;
    height: 44px; /* THINNER button */
    margin-top: auto;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--navy);
    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transition: left 0.6s ease;
}

.submit-btn:hover::before { left: 100%; }

.submit-btn:hover {
    background: var(--navy);
    color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(10, 22, 80, 0.25);
}

.submit-btn:active { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        width: min(700px, calc(100% - 32px));
        gap: 20px;
    }
    .contact-form-area {
        order: 1;
        min-height: 0;
        padding: 24px 20px;
    }
    .contact-image {
        order: 2;
    }
    .contact-image img {
        height: 250px;
        min-height: 250px;
    }
    .contact-image::before { display: none; }
}

@media (max-width: 600px) {
    .contact-container { width: calc(100% - 24px); }
    .contact-form-area { padding: 20px 16px; }
    .form-grid { grid-template-columns: 1fr; gap: 10px; }
    .field-full { grid-column: span 1; }
    .field input { height: 44px; }
}