/* ================================================================
   CUSTOM PREMIUM THEME — Amrit Portfolio / Digital Agency Patiala
   Design: Futuristic · Dark · High-Converting · SEO-Ready
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* ── CSS Resets & Global ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background      : #070a10;
    background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(2,255,247,.07) 0%, transparent 70%);
    color           : #c1c1c1;
    font-family     : 'Inter', 'Bricolage Grotesque', sans-serif;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: #070a10; }
::-webkit-scrollbar-thumb { background: var(--theme); border-radius: 2px; }

/* ── Utility: Gradient Text ────────────────────────────────────── */
.gradient-text {
    background    : linear-gradient(135deg, #02fff7 0%, #7c3aed 100%);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
    background-clip : text;
}
.text-cyan   { color: #02fff7; }
.text-white  { color: #fff !important; }
.text-muted-custom { color: #6b7280; }

/* ── Glow border helper ────────────────────────────────────────── */
.glow-border {
    border    : 1px solid rgba(2,255,247,.18);
    box-shadow: 0 0 0 0 rgba(2,255,247,0);
    transition: box-shadow .35s, border-color .35s;
}
.glow-border:hover {
    border-color: rgba(2,255,247,.55);
    box-shadow  : 0 0 28px rgba(2,255,247,.15);
}

/* ── Glass card ────────────────────────────────────────────────── */
.glass-card {
    background    : rgba(14,17,24,.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border        : 1px solid rgba(2,255,247,.10);
    border-radius : 16px;
    transition    : transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.glass-card:hover {
    transform    : translateY(-6px);
    border-color : rgba(2,255,247,.35);
    box-shadow   : 0 20px 60px rgba(0,0,0,.4), 0 0 30px rgba(2,255,247,.08);
}

/* ================================================================
   HEADER (glassmorphism sticky)
   ================================================================ */
#header-sticky.sticky-header {
    background    : rgba(7,10,16,.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom : 1px solid rgba(2,255,247,.08);
    box-shadow    : 0 4px 30px rgba(0,0,0,.5);
}

.header-1 {
    background: rgba(37, 99, 235, 0.1); /* blue tint */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* Logo glow on hover */
.header-logo img, .logo-2 img {
    height    : 44px;
    width     : auto;
    filter    : brightness(1.1);
    transition: filter .3s;
}
.logo a:hover img { filter: drop-shadow(0 0 8px rgba(2,255,247,.7)); }

/* Nav links */
.main-menu nav ul li a {
    color      : rgba(255,255,255,.80);
    font-size  : 14px;
    font-weight: 500;
    letter-spacing: .4px;
    transition : color .3s;
    position   : relative;
}
.main-menu nav ul li a::after {
    content   : '';
    position  : absolute;
    bottom    : -4px; left: 0;
    width     : 0; height: 2px;
    background: var(--theme);
    border-radius: 2px;
    transition: width .3s ease;
    box-shadow: 0 0 8px var(--theme);
}
.main-menu nav ul li.active a,
.main-menu nav ul li a:hover { color: var(--theme); }
.main-menu nav ul li.active a::after,
.main-menu nav ul li a:hover::after { width: 100%; }

/* Header CTA button */
.header-right .theme-btn {
    padding     : 12px 26px;
    font-size   : 14px;
    border-radius: 50px;
    font-weight : 600;
    letter-spacing: .3px;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.agency-hero {
    position       : relative;
    min-height     : 100vh;
    display        : flex;
    align-items    : center;
    overflow       : hidden;
    background     : #070a10;
    padding        : 140px 0 80px;
}

/* Animated radial glow orbs */
.agency-hero::before {
    content  : '';
    position : absolute;
    top      : -20%; left: -10%;
    width    : 60%; height: 60%;
    background: radial-gradient(ellipse, rgba(2,255,247,.07) 0%, transparent 70%);
    animation: orb-float 8s ease-in-out infinite alternate;
    pointer-events: none;
}
.agency-hero::after {
    content  : '';
    position : absolute;
    bottom   : -20%; right: -10%;
    width    : 55%; height: 55%;
    background: radial-gradient(ellipse, rgba(124,58,237,.06) 0%, transparent 70%);
    animation: orb-float 10s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}
@keyframes orb-float {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, 20px) scale(1.1); }
}

/* Grid overlay for futuristic feel */
.hero-grid-overlay {
    position  : absolute;
    inset     : 0;
    background:
        linear-gradient(rgba(2,255,247,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2,255,247,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
}

.hero-content { position: relative; z-index: 2; }

.hero-badge {
    display     : inline-flex;
    align-items : center;
    gap         : 8px;
    background  : rgba(2,255,247,.08);
    border      : 1px solid rgba(2,255,247,.25);
    color       : var(--theme);
    padding     : 7px 18px;
    border-radius: 50px;
    font-size   : 12px;
    font-weight : 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 24px;
    animation   : badge-pulse 3s ease infinite;
}
.hero-badge::before {
    content      : '';
    display      : inline-block;
    width        : 7px; height: 7px;
    background   : var(--theme);
    border-radius: 50%;
    box-shadow   : 0 0 8px var(--theme);
    animation    : pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.4); }
}
@keyframes badge-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(2,255,247,.15); }
    50%      { box-shadow: 0 0 0 8px rgba(2,255,247,0); }
}

.hero-title {
    font-family : 'Big Shoulders Display', 'Syne', sans-serif;
    font-size   : 72px;
    font-weight : 800;
    line-height : 1.05;
    color       : #fff;
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: -1px;
}
@media (max-width: 1200px) { .hero-title { font-size: 60px; } }
@media (max-width: 991px)  { .hero-title { font-size: 48px; } }
@media (max-width: 767px)  { .hero-title { font-size: 36px; letter-spacing: -.5px; } }
@media (max-width: 575px)  { .hero-title { font-size: 30px; } }

.hero-title .gradient-text {
    background    : linear-gradient(90deg, #02fff7, #00d4ce, #7c3aed);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
    background-clip : text;
    background-size : 200% auto;
    animation       : gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.hero-typed-wrap {
    font-size   : 20px;
    color       : #e2e8f0;
    margin-bottom: 20px;
    min-height  : 32px;
    font-weight : 400;
}
.hero-typed-wrap strong { color: var(--theme); font-weight: 600; }
.typed-cursor { color: var(--theme); }

.hero-desc {
    font-size   : 16px;
    line-height : 1.8;
    color       : #8b9ab1;
    max-width   : 540px;
    margin-bottom: 40px;
}

/* Hero CTA buttons */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }

.btn-primary-glow {
    display      : inline-flex;
    align-items  : center;
    gap          : 10px;
    background   : var(--theme);
    color        : #070a10;
    padding      : 16px 36px;
    border-radius: 50px;
    font-weight  : 700;
    font-size    : 15px;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow   : 0 0 24px rgba(2,255,247,.4);
    transition   : all .35s ease;
    position     : relative;
    overflow     : hidden;
}
.btn-primary-glow::after {
    content    : '';
    position   : absolute;
    inset      : -2px;
    background : linear-gradient(45deg, #02fff7, #7c3aed, #02fff7);
    z-index    : -1;
    border-radius: 50px;
    filter     : blur(8px);
    opacity    : 0;
    transition : opacity .35s;
}
.btn-primary-glow:hover {
    color      : #070a10;
    transform  : translateY(-3px);
    box-shadow : 0 0 40px rgba(2,255,247,.6);
}
.btn-primary-glow:hover::after { opacity: .5; }
.btn-primary-glow i { transition: transform .3s; }
.btn-primary-glow:hover i { transform: translateX(4px); }

.btn-ghost-glow {
    display      : inline-flex;
    align-items  : center;
    gap          : 10px;
    background   : transparent;
    color        : #fff;
    padding      : 15px 36px;
    border-radius: 50px;
    font-weight  : 600;
    font-size    : 15px;
    text-decoration: none;
    border       : 1.5px solid rgba(2,255,247,.35);
    transition   : all .35s ease;
}
.btn-ghost-glow:hover {
    color        : var(--theme);
    border-color : var(--theme);
    box-shadow   : 0 0 20px rgba(2,255,247,.2), inset 0 0 20px rgba(2,255,247,.04);
    transform    : translateY(-3px);
}

/* Social icons in hero */
.hero-socials {
    display    : flex;
    align-items: center;
    gap        : 12px;
}
.hero-socials span { color: #4b5563; font-size: 13px; margin-right: 4px; }
.hero-social-link {
    display     : inline-flex;
    align-items : center;
    justify-content: center;
    width       : 40px; height: 40px;
    border-radius: 50%;
    border      : 1px solid rgba(255,255,255,.1);
    color       : #9ca3af;
    font-size   : 14px;
    text-decoration: none;
    transition  : all .3s;
}
.hero-social-link:hover {
    border-color: var(--theme);
    color       : var(--theme);
    box-shadow  : 0 0 14px rgba(2,255,247,.25);
    transform   : translateY(-2px);
}

/* Hero stats */
.hero-stats-row {
    display         : grid;
    grid-template-columns: repeat(4, 1fr);
    gap             : 1px;
    background      : rgba(2,255,247,.08);
    border          : 1px solid rgba(2,255,247,.10);
    border-radius   : 16px;
    overflow        : hidden;
    margin-top      : 80px;
    position        : relative;
    z-index         : 2;
}
@media (max-width: 767px) {
    .hero-stats-row { grid-template-columns: repeat(2, 1fr); }
}

.hero-stat {
    background  : rgba(7,10,16,.8);
    padding     : 28px 24px;
    text-align  : center;
    position    : relative;
    transition  : background .3s;
}
.hero-stat:hover { background: rgba(2,255,247,.05); }
.hero-stat-number {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 44px;
    font-weight : 800;
    color       : var(--theme);
    line-height : 1;
    display     : block;
    text-shadow : 0 0 20px rgba(2,255,247,.4);
}
@media (max-width: 575px) { .hero-stat-number { font-size: 32px; } }
.hero-stat-label {
    font-size  : 12px;
    color      : #6b7280;
    margin-top : 6px;
    display    : block;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* ================================================================
   SECTION COMMON STYLES
   ================================================================ */
.section-tag {
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
    color        : var(--theme);
    font-size    : 12px;
    font-weight  : 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.section-tag::before,
.section-tag::after {
    content   : '';
    flex      : 1;
    height    : 1px;
    background: var(--theme);
    opacity   : .35;
    min-width : 24px;
}

.section-heading {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 52px;
    font-weight   : 800;
    color         : #fff;
    text-transform: uppercase;
    line-height   : 1.05;
    letter-spacing: -0.5px;
}
@media (max-width: 991px) { .section-heading { font-size: 40px; } }
@media (max-width: 767px) { .section-heading { font-size: 32px; } }

.section-subtext {
    font-size  : 16px;
    color      : #6b7280;
    line-height: 1.8;
    max-width  : 560px;
}

/* ================================================================
   SERVICES SECTION
   ================================================================ */
.services-premium {
    padding    : 100px 0;
    background : #070a10;
    position   : relative;
}
.services-premium::before {
    content  : '';
    position : absolute;
    top      : 0; left: 50%;
    transform: translateX(-50%);
    width    : 1px;
    height   : 100%;
    background: linear-gradient(transparent, rgba(2,255,247,.15), transparent);
}

.service-card-premium {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.08);
    border-radius: 20px;
    padding      : 40px 32px;
    height       : 100%;
    position     : relative;
    overflow     : hidden;
    transition   : all .4s cubic-bezier(.4,0,.2,1);
    cursor       : default;
}
.service-card-premium::before {
    content    : '';
    position   : absolute;
    top        : 0; left: 0;
    width      : 100%; height: 3px;
    background : linear-gradient(90deg, var(--theme), #7c3aed);
    transform  : scaleX(0);
    transition : transform .4s ease;
}
.service-card-premium:hover {
    transform  : translateY(-8px);
    border-color: rgba(2,255,247,.30);
    box-shadow : 0 24px 64px rgba(0,0,0,.5), 0 0 40px rgba(2,255,247,.06);
    background : rgba(2,255,247,.03);
}
.service-card-premium:hover::before { transform: scaleX(1); }

.service-card-number {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 64px;
    font-weight   : 800;
    color         : rgba(2,255,247,.06);
    position      : absolute;
    top           : 12px; right: 24px;
    line-height   : 1;
    pointer-events: none;
    transition    : color .4s;
}
.service-card-premium:hover .service-card-number { color: rgba(2,255,247,.12); }

.service-icon-box {
    width        : 60px; height: 60px;
    background   : rgba(2,255,247,.08);
    border       : 1px solid rgba(2,255,247,.15);
    border-radius: 14px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    margin-bottom: 24px;
    font-size    : 24px;
    color        : var(--theme);
    transition   : all .35s ease;
}
.service-card-premium:hover .service-icon-box {
    background : rgba(2,255,247,.15);
    box-shadow : 0 0 20px rgba(2,255,247,.25);
    transform  : scale(1.05);
}

.service-card-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 22px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    margin-bottom : 12px;
    letter-spacing: .5px;
}
.service-card-desc {
    font-size  : 14px;
    color      : #6b7280;
    line-height: 1.75;
    margin-bottom: 24px;
}

.service-link {
    display    : inline-flex;
    align-items: center;
    gap        : 8px;
    color      : var(--theme);
    font-size  : 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .5px;
    text-transform: uppercase;
    transition : gap .3s;
}
.service-link:hover { gap: 14px; color: var(--theme); }

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.about-premium {
    padding   : 100px 0;
    background: #0a0d15;
    position  : relative;
}
.about-premium::before {
    content  : '';
    position : absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 60% 60% at 80% 50%, rgba(2,255,247,.04) 0%, transparent 70%);
    pointer-events: none;
}

.about-image-wrap {
    position: relative;
}
.about-image-inner {
    border-radius: 24px;
    overflow     : hidden;
    position     : relative;
}
.about-image-inner img {
    width: 100%;
    filter: brightness(.9) saturate(1.1);
    transition: transform .6s ease;
}
.about-image-inner:hover img { transform: scale(1.03); }
.about-image-inner::after {
    content  : '';
    position : absolute;
    inset    : 0;
    background: linear-gradient(135deg, rgba(2,255,247,.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Floating experience badge */
.about-exp-badge {
    position   : absolute;
    bottom     : -20px; right: -20px;
    background : var(--theme);
    color      : #070a10;
    border-radius: 16px;
    padding    : 20px 24px;
    text-align : center;
    box-shadow : 0 0 40px rgba(2,255,247,.4);
    z-index    : 2;
}
@media (max-width: 575px) {
    .about-exp-badge { bottom: 10px; right: 10px; padding: 14px 18px; }
}
.about-exp-badge .num {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 48px;
    font-weight : 800;
    line-height : 1;
    display     : block;
}
.about-exp-badge .lbl {
    font-size  : 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity    : .8;
}

.about-stats-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 20px;
    margin-top           : 40px;
}
.about-stat-item {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.10);
    border-radius: 14px;
    padding      : 24px 20px;
    text-align   : center;
    transition   : border-color .3s;
}
.about-stat-item:hover { border-color: rgba(2,255,247,.35); }
.about-stat-num {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 40px;
    font-weight : 800;
    color       : var(--theme);
    line-height : 1;
    display     : block;
    text-shadow : 0 0 20px rgba(2,255,247,.3);
}
.about-stat-lbl {
    font-size  : 12px;
    color      : #6b7280;
    margin-top : 6px;
    display    : block;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Feature checklist */
.feature-list { list-style: none; padding: 0; margin: 28px 0; }
.feature-list li {
    display    : flex;
    align-items: center;
    gap        : 12px;
    padding    : 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size  : 15px;
    color      : #d1d5db;
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li .check-icon {
    width        : 22px; height: 22px;
    background   : rgba(2,255,247,.1);
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : var(--theme);
    font-size    : 11px;
    flex-shrink  : 0;
}

/* ================================================================
   PROCESS SECTION
   ================================================================ */
.process-section {
    padding   : 100px 0;
    background: #070a10;
}
.process-step {
    position  : relative;
    padding   : 36px 32px;
    background: rgba(14,17,24,.9);
    border    : 1px solid rgba(2,255,247,.08);
    border-radius: 20px;
    text-align: center;
    height    : 100%;
    transition: all .4s ease;
}
.process-step:hover {
    transform   : translateY(-6px);
    border-color: rgba(2,255,247,.30);
    box-shadow  : 0 20px 60px rgba(0,0,0,.4);
}
.process-step-number {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 56px;
    font-weight : 800;
    background  : linear-gradient(135deg, rgba(2,255,247,.5), rgba(2,255,247,.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height : 1;
    margin-bottom: 20px;
    display     : block;
}
.process-step-title {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 20px;
    font-weight : 700;
    color       : #fff;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.process-step-desc { font-size: 14px; color: #6b7280; line-height: 1.75; }

/* Connector line between steps */
.process-connector {
    position    : absolute;
    top         : 50%;
    right       : -36px;
    transform   : translateY(-50%);
    width       : 72px;
    height      : 1px;
    background  : linear-gradient(90deg, rgba(2,255,247,.4), rgba(2,255,247,.1));
    z-index     : 1;
}
@media (max-width: 991px) { .process-connector { display: none; } }

/* ================================================================
   WHY US SECTION
   ================================================================ */
.why-us-section {
    padding   : 100px 0;
    background: #0a0d15;
    position  : relative;
}
.why-us-section::after {
    content  : '';
    position : absolute;
    inset    : 0;
    background: radial-gradient(ellipse 50% 60% at 20% 50%, rgba(124,58,237,.04) 0%, transparent 70%);
    pointer-events: none;
}

.why-item {
    display    : flex;
    align-items: flex-start;
    gap        : 20px;
    padding    : 28px;
    background : rgba(14,17,24,.9);
    border     : 1px solid rgba(2,255,247,.07);
    border-radius: 16px;
    transition : all .35s ease;
    height     : 100%;
}
.why-item:hover {
    border-color: rgba(2,255,247,.25);
    background  : rgba(2,255,247,.03);
    transform   : translateX(4px);
}
.why-item-icon {
    width        : 52px; height: 52px;
    border-radius: 12px;
    background   : rgba(2,255,247,.08);
    border       : 1px solid rgba(2,255,247,.15);
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 22px;
    color        : var(--theme);
    flex-shrink  : 0;
    transition   : all .3s;
}
.why-item:hover .why-item-icon {
    background : rgba(2,255,247,.15);
    box-shadow : 0 0 20px rgba(2,255,247,.2);
}
.why-item-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 18px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    margin-bottom : 6px;
}
.why-item-desc { font-size: 14px; color: #6b7280; line-height: 1.7; }

/* ================================================================
   CTA SECTION
   ================================================================ */
.cta-section {
    padding   : 100px 0;
    background: #070a10;
    position  : relative;
    overflow  : hidden;
}
.cta-section::before {
    content  : '';
    position : absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width    : 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(2,255,247,.08) 0%, transparent 70%);
    pointer-events: none;
}

.cta-box {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.15);
    border-radius: 28px;
    padding      : 72px 60px;
    text-align   : center;
    position     : relative;
    overflow     : hidden;
    box-shadow   : 0 0 80px rgba(2,255,247,.06);
}
.cta-box::before {
    content  : '';
    position : absolute;
    top: 0; left: 0; right: 0;
    height   : 2px;
    background: linear-gradient(90deg, transparent, var(--theme), #7c3aed, transparent);
}
.cta-box::after {
    content  : '';
    position : absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(2,255,247,.04) 0%, transparent 70%);
    pointer-events: none;
}
@media (max-width: 767px) { .cta-box { padding: 48px 28px; } }

.cta-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 56px;
    font-weight   : 800;
    color         : #fff;
    text-transform: uppercase;
    line-height   : 1.05;
    margin-bottom : 20px;
    letter-spacing: -1px;
}
@media (max-width: 767px) { .cta-title { font-size: 36px; } }
.cta-subtitle {
    font-size  : 16px;
    color      : #6b7280;
    max-width  : 500px;
    margin     : 0 auto 40px;
    line-height: 1.8;
}
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }

/* WhatsApp / phone CTA pill */
.whatsapp-cta {
    display    : inline-flex;
    align-items: center;
    gap        : 10px;
    background : #25d366;
    color      : #fff;
    padding    : 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size  : 15px;
    text-decoration: none;
    transition : all .35s;
    box-shadow : 0 0 20px rgba(37,211,102,.3);
}
.whatsapp-cta:hover {
    color    : #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(37,211,102,.5);
}

/* ================================================================
   TESTIMONIALS SECTION
   ================================================================ */
.testimonials-premium {
    padding   : 100px 0;
    background: #0a0d15;
}
.testimonial-card {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.08);
    border-radius: 20px;
    padding      : 36px 32px;
    height       : 100%;
    position     : relative;
    transition   : all .4s ease;
}
.testimonial-card:hover {
    border-color: rgba(2,255,247,.25);
    transform   : translateY(-4px);
    box-shadow  : 0 20px 60px rgba(0,0,0,.4);
}
.testimonial-quote {
    color        : var(--theme);
    font-size    : 40px;
    line-height  : 1;
    margin-bottom: 20px;
    opacity      : .6;
    font-family  : Georgia, serif;
}
.testimonial-text {
    font-size  : 15px;
    color      : #9ca3af;
    line-height: 1.8;
    margin-bottom: 28px;
    font-style : italic;
}
.testimonial-stars {
    color        : #fbbf24;
    font-size    : 14px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}
.testimonial-author {
    display    : flex;
    align-items: center;
    gap        : 14px;
    padding-top: 20px;
    border-top : 1px solid rgba(255,255,255,.06);
}
.testimonial-avatar {
    width        : 48px; height: 48px;
    border-radius: 50%;
    background   : rgba(2,255,247,.1);
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 20px;
    color        : var(--theme);
    font-weight  : 700;
    font-family  : 'Big Shoulders Display', sans-serif;
    border       : 2px solid rgba(2,255,247,.2);
}
.testimonial-name {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 16px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    display       : block;
}
.testimonial-role { font-size: 12px; color: #4b5563; }

/* ================================================================
   BLOG SECTION
   ================================================================ */
.blog-premium {
    padding   : 100px 0;
    background: #070a10;
}
.blog-card {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.07);
    border-radius: 20px;
    overflow     : hidden;
    height       : 100%;
    transition   : all .4s ease;
    display      : flex;
    flex-direction: column;
}
.blog-card:hover {
    border-color: rgba(2,255,247,.25);
    transform   : translateY(-6px);
    box-shadow  : 0 24px 64px rgba(0,0,0,.5);
}
.blog-card-image {
    position   : relative;
    overflow   : hidden;
    height     : 220px;
}
.blog-card-image img {
    width     : 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.blog-card:hover .blog-card-image img { transform: scale(1.06); }
.blog-card-category {
    position     : absolute;
    top          : 16px; left: 16px;
    background   : rgba(2,255,247,.9);
    color        : #070a10;
    font-size    : 11px;
    font-weight  : 700;
    padding      : 5px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.blog-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta {
    display    : flex;
    align-items: center;
    gap        : 16px;
    margin-bottom: 14px;
    font-size  : 12px;
    color      : #4b5563;
}
.blog-card-meta i { color: var(--theme); }
.blog-card-title {
    font-family : 'Big Shoulders Display', sans-serif;
    font-size   : 20px;
    font-weight : 700;
    color       : #fff;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height : 1.3;
    flex        : 1;
    transition  : color .3s;
}
.blog-card-title:hover { color: var(--theme); }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--theme); }
.blog-card-excerpt { font-size: 14px; color: #6b7280; line-height: 1.7; margin-bottom: 20px; }
.blog-read-more {
    display    : inline-flex;
    align-items: center;
    gap        : 8px;
    color      : var(--theme);
    font-size  : 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition : gap .3s;
    margin-top : auto;
}
.blog-read-more:hover { gap: 14px; color: var(--theme); }

/* ================================================================
   CONTACT PAGE PREMIUM
   ================================================================ */
.contact-premium { padding: 100px 0; background: #070a10; }

.contact-info-card {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.10);
    border-radius: 20px;
    padding      : 40px 36px;
    height       : 100%;
}
.contact-info-item {
    display    : flex;
    align-items: flex-start;
    gap        : 18px;
    padding    : 20px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.contact-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-info-icon {
    width        : 48px; height: 48px;
    background   : rgba(2,255,247,.08);
    border       : 1px solid rgba(2,255,247,.15);
    border-radius: 12px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 20px;
    color        : var(--theme);
    flex-shrink  : 0;
}
.contact-info-title { font-size: 12px; color: #4b5563; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; display: block; }
.contact-info-value { font-size: 15px; color: #e2e8f0; font-weight: 500; }

.contact-form-card {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.10);
    border-radius: 20px;
    padding      : 48px 40px;
}
@media (max-width: 767px) { .contact-form-card { padding: 32px 24px; } }

.form-group-premium { margin-bottom: 24px; }
.form-group-premium label {
    display     : block;
    font-size   : 12px;
    font-weight : 600;
    color       : #6b7280;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 8px;
}
.form-control-premium {
    width       : 100%;
    background  : rgba(7,10,16,.8);
    border      : 1px solid rgba(2,255,247,.10);
    border-radius: 10px;
    padding     : 14px 18px;
    font-size   : 15px;
    color       : #e2e8f0;
    outline     : none;
    transition  : border-color .3s, box-shadow .3s;
    font-family : 'Inter', sans-serif;
}
.form-control-premium:focus {
    border-color: rgba(2,255,247,.45);
    box-shadow  : 0 0 0 3px rgba(2,255,247,.08), 0 0 20px rgba(2,255,247,.06);
}
.form-control-premium::placeholder { color: #374151; }
textarea.form-control-premium { resize: vertical; min-height: 140px; }

/* ================================================================
   MAP SECTION
   ================================================================ */
.map-section {
    position: relative;
    overflow: hidden;
}
.map-section iframe {
    width    : 100%;
    height   : 400px;
    filter   : invert(90%) hue-rotate(170deg) saturate(1.3) brightness(.8);
    border   : none;
    display  : block;
}

/* ================================================================
   FOOTER PREMIUM
   ================================================================ */
.footer-premium {
    background  : #050810;
    position    : relative;
    overflow    : hidden;
    border-top  : 1px solid rgba(2,255,247,.06);
}
.footer-premium::before {
    content  : '';
    position : absolute;
    top      : 0; left: 50%;
    transform: translateX(-50%);
    width    : 60%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--theme), transparent);
    opacity  : .3;
}

.footer-marque-band {
    background : rgba(2,255,247,.04);
    border-top : 1px solid rgba(2,255,247,.08);
    border-bottom: 1px solid rgba(2,255,247,.08);
    padding    : 18px 0;
    overflow   : hidden;
    white-space: nowrap;
}
.footer-marque-inner { display: inline-flex; animation: marquee-scroll 20s linear infinite; }
.footer-marque-item {
    display    : inline-flex;
    align-items: center;
    gap        : 16px;
    padding    : 0 32px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size  : 14px;
    font-weight: 700;
    color      : rgba(2,255,247,.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}
.footer-marque-item i { font-size: 8px; color: var(--theme); }
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.footer-main { padding: 80px 0 48px; }

.footer-logo { display: inline-block; margin-bottom: 24px; }
.footer-logo img { height: 44px; width: auto; filter: brightness(1.1); }

.footer-about-text { font-size: 14px; color: #4b5563; line-height: 1.8; margin-bottom: 28px; max-width: 320px; }

.footer-socials { display: flex; gap: 10px; }
.footer-social-btn {
    width        : 40px; height: 40px;
    border       : 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : #4b5563;
    font-size    : 14px;
    text-decoration: none;
    transition   : all .3s;
}
.footer-social-btn:hover {
    border-color: var(--theme);
    color       : var(--theme);
    box-shadow  : 0 0 14px rgba(2,255,247,.2);
}

.footer-col-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 16px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom : 24px;
    position      : relative;
    padding-bottom: 12px;
}
.footer-col-title::after {
    content     : '';
    position    : absolute;
    bottom      : 0; left: 0;
    width       : 32px; height: 2px;
    background  : var(--theme);
    box-shadow  : 0 0 8px var(--theme);
    border-radius: 2px;
}

.footer-nav { list-style: none; padding: 0; }
.footer-nav li { margin-bottom: 12px; }
.footer-nav a {
    color      : #4b5563;
    font-size  : 14px;
    text-decoration: none;
    transition : color .3s, padding-left .3s;
    display    : flex;
    align-items: center;
    gap        : 8px;
}
.footer-nav a::before {
    content   : '';
    width     : 0; height: 1px;
    background: var(--theme);
    transition: width .3s;
    display   : inline-block;
}
.footer-nav a:hover { color: var(--theme); padding-left: 4px; }
.footer-nav a:hover::before { width: 12px; }

.footer-contact-item {
    display    : flex;
    align-items: flex-start;
    gap        : 12px;
    margin-bottom: 16px;
    font-size  : 14px;
    color      : #4b5563;
}
.footer-contact-item i { color: var(--theme); margin-top: 2px; flex-shrink: 0; }
.footer-contact-item a { color: #4b5563; text-decoration: none; transition: color .3s; }
.footer-contact-item a:hover { color: var(--theme); }

.footer-bottom {
    border-top : 1px solid rgba(255,255,255,.05);
    padding    : 28px 0;
    display    : flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap  : wrap;
    gap        : 16px;
}
.footer-copyright { font-size: 13px; color: #374151; }
.footer-copyright a { color: var(--theme); text-decoration: none; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { font-size: 13px; color: #374151; text-decoration: none; transition: color .3s; }
.footer-bottom-links a:hover { color: var(--theme); }

/* ================================================================
   BREADCRUMB PREMIUM
   ================================================================ */
.breadcrumb-premium {
    padding    : 120px 0 60px;
    background : #070a10;
    position   : relative;
    overflow   : hidden;
}
.breadcrumb-premium::before {
    content  : '';
    position : absolute;
    inset    : 0;
    background:
        linear-gradient(rgba(2,255,247,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2,255,247,.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 40%, transparent 100%);
    pointer-events: none;
}
.breadcrumb-premium::after {
    content  : '';
    position : absolute;
    bottom   : 0; left: 50%;
    transform: translateX(-50%);
    width    : 60%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(2,255,247,.15), transparent);
}
.breadcrumb-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 64px;
    font-weight   : 800;
    color         : #fff;
    text-transform: uppercase;
    line-height   : 1;
    margin-bottom : 16px;
    letter-spacing: -1px;
}
@media (max-width: 767px) { .breadcrumb-title { font-size: 40px; } }
.breadcrumb-nav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4b5563; list-style: none; padding: 0; }
.breadcrumb-nav li a { color: #6b7280; text-decoration: none; transition: color .3s; }
.breadcrumb-nav li a:hover { color: var(--theme); }
.breadcrumb-nav li.active { color: var(--theme); }
.breadcrumb-nav li i { font-size: 10px; }

/* ================================================================
   MARQUEE SECTION
   ================================================================ */
.marquee-premium {
    background  : rgba(2,255,247,.03);
    border-top  : 1px solid rgba(2,255,247,.08);
    border-bottom: 1px solid rgba(2,255,247,.08);
    padding     : 20px 0;
    overflow    : hidden;
    white-space : nowrap;
}
.marquee-premium-inner { display: inline-flex; animation: marquee-scroll 25s linear infinite; }
.marquee-premium-item {
    display    : inline-flex;
    align-items: center;
    gap        : 16px;
    padding    : 0 40px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size  : 16px;
    font-weight: 700;
    color      : rgba(255,255,255,.25);
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
}
.marquee-premium-item span { color: var(--theme); font-size: 8px; vertical-align: middle; }

/* ================================================================
   FLOATING WHATSAPP BUTTON
   ================================================================ */
.whatsapp-float {
    position   : fixed;
    bottom     : 28px;
    right      : 28px;
    width      : 58px;
    height     : 58px;
    background : #25d366;
    border-radius: 50%;
    display    : flex;
    align-items: center;
    justify-content: center;
    font-size  : 26px;
    color      : #fff;
    text-decoration: none;
    z-index    : 9999;
    box-shadow : 0 4px 20px rgba(37,211,102,.5);
    transition : all .35s ease;
    animation  : whatsapp-bounce 3s ease infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37,211,102,.7);
    color     : #fff;
}
@keyframes whatsapp-bounce {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
    50%      { box-shadow: 0 4px 35px rgba(37,211,102,.8); }
}

/* ================================================================
   LOCATION BADGE (SEO)
   ================================================================ */
.location-badge {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    background : rgba(2,255,247,.06);
    border     : 1px solid rgba(2,255,247,.15);
    color      : var(--theme);
    padding    : 5px 14px;
    border-radius: 50px;
    font-size  : 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================================================================
   PRELOADER – theme color update
   ================================================================ */
.animation-preloader .spinner {
    border-color: rgba(2,255,247,.15);
    border-top-color: #02fff7;
    box-shadow  : 0 0 20px rgba(2,255,247,.3);
}
.letters-loading::after { color: var(--theme); }

/* ================================================================
   BACK TO TOP
   ================================================================ */
#back-top.back-to-top {
    background   : transparent;
    border       : 1.5px solid rgba(2,255,247,.35);
    color        : var(--theme);
    width        : 44px; height: 44px;
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    transition   : all .3s;
}
#back-top.back-to-top:hover {
    background   : var(--theme);
    color        : #070a10;
    box-shadow   : 0 0 20px rgba(2,255,247,.4);
}

/* ================================================================
   SECTION DIVIDER
   ================================================================ */
.section-divider {
    height    : 1px;
    background: linear-gradient(90deg, transparent, rgba(2,255,247,.12), transparent);
    border    : none;
    margin    : 0;
}

/* ================================================================
   RESPONSIVE TWEAKS
   ================================================================ */
@media (max-width: 991px) {
    .services-premium,
    .about-premium,
    .process-section,
    .why-us-section,
    .cta-section,
    .testimonials-premium,
    .blog-premium,
    .contact-premium { padding: 70px 0; }
}
@media (max-width: 767px) {
    .services-premium,
    .about-premium,
    .process-section,
    .why-us-section,
    .cta-section,
    .testimonials-premium,
    .blog-premium,
    .contact-premium { padding: 56px 0; }
    .about-exp-badge { display: none; }
}

/* ================================================================
   FOOTER PREMIUM — additional helpers
   ================================================================ */
.footer-marquee-band {
    background : rgba(2,255,247,.04);
    border-top : 1px solid rgba(2,255,247,.08);
    border-bottom: 1px solid rgba(2,255,247,.08);
    padding    : 16px 0;
    overflow   : hidden;
    white-space: nowrap;
}
.footer-marquee-band .marquee-track {
    display   : inline-flex;
    align-items: center;
    animation : marquee-scroll 30s linear infinite;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size  : 13px;
    font-weight: 700;
    color      : rgba(2,255,247,.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}

.footer-brand .footer-tagline {
    font-size : 14px;
    color     : #4b5563;
    line-height: 1.8;
    max-width : 340px;
}
.footer-brand .footer-contact-items { display: flex; flex-direction: column; gap: 10px; }
.footer-brand .footer-contact-item {
    display    : flex;
    align-items: center;
    gap        : 10px;
    font-size  : 14px;
    color      : #4b5563;
    text-decoration: none;
    transition : color .3s;
}
.footer-brand .footer-contact-item:hover { color: #02fff7; }
.footer-brand .footer-contact-item .fc-icon {
    width        : 32px; height: 32px;
    background   : rgba(2,255,247,.06);
    border       : 1px solid rgba(2,255,247,.12);
    border-radius: 8px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    color        : #02fff7;
    font-size    : 12px;
    flex-shrink  : 0;
}

.footer-widget-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 15px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom : 1.25rem;
    padding-bottom: 12px;
    border-bottom : 1px solid rgba(2,255,247,.08);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
    font-size    : 14px;
    color        : #4b5563;
    text-decoration: none;
    transition   : color .3s, padding-left .3s;
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
}
.footer-links a::before {
    content   : '';
    width     : 0; height: 1px;
    background: #02fff7;
    transition: width .3s;
    display   : inline-block;
}
.footer-links a:hover { color: #02fff7; padding-left: 4px; }
.footer-links a:hover::before { width: 10px; }

.footer-wa-btn {
    padding      : .65rem 1.25rem;
    background   : rgba(37,211,102,.1);
    border       : 1px solid rgba(37,211,102,.3);
    color        : #25d366;
    border-radius: 8px;
    font-size    : 14px;
    font-weight  : 600;
    text-decoration: none;
    transition   : all .3s;
}
.footer-wa-btn:hover {
    background : #25d366;
    color      : #fff;
    box-shadow : 0 4px 20px rgba(37,211,102,.35);
}
.footer-social-icon {
    width        : 38px; height: 38px;
    background   : rgba(2,255,247,.06);
    border       : 1px solid rgba(2,255,247,.12);
    border-radius: 8px;
    display      : inline-flex;
    align-items  : center;
    justify-content: center;
    color        : #6b7280;
    font-size    : 14px;
    text-decoration: none;
    transition   : all .3s;
}
.footer-social-icon:hover {
    background : rgba(2,255,247,.12);
    border-color: rgba(2,255,247,.35);
    color      : #02fff7;
    box-shadow : 0 0 12px rgba(2,255,247,.2);
}
.footer-bottom-bar {
    border-top : 1px solid rgba(255,255,255,.04);
    padding    : 24px 0;
}

/* ================================================================
   CONTACT PAGE — new classes
   ================================================================ */
.contact-info-card {
    display      : flex;
    align-items  : center;
    gap          : 18px;
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.08);
    border-radius: 14px;
    padding      : 20px 24px;
    margin-bottom: 16px;
    transition   : all .3s;
}
.contact-info-card:last-child { margin-bottom: 0; }
.contact-info-card:hover {
    border-color: rgba(2,255,247,.2);
    transform   : translateX(4px);
}
.cic-icon {
    width        : 46px; height: 46px;
    background   : rgba(2,255,247,.08);
    border       : 1px solid rgba(2,255,247,.15);
    border-radius: 12px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 18px;
    color        : #02fff7;
    flex-shrink  : 0;
}
.cic-label {
    display     : block;
    font-size   : 11px;
    color       : #4b5563;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.cic-value {
    font-size  : 15px;
    color      : #d1d5db;
    font-weight: 500;
    text-decoration: none;
    transition : color .3s;
}
a.cic-value:hover { color: #02fff7; }

.contact-form-premium {
    background   : rgba(14,17,24,.95);
    border       : 1px solid rgba(2,255,247,.10);
    border-radius: 20px;
    padding      : 40px 36px;
}
@media (max-width: 767px) { .contact-form-premium { padding: 28px 20px; } }

.form-label-premium {
    display     : block;
    font-size   : 12px;
    font-weight : 600;
    color       : #6b7280;
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 6px;
}
.form-control-premium {
    width        : 100%;
    background   : rgba(7,10,16,.8);
    border       : 1px solid rgba(2,255,247,.10);
    border-radius: 10px;
    padding      : 13px 16px;
    font-size    : 14px;
    color        : #e2e8f0;
    outline      : none;
    transition   : border-color .3s, box-shadow .3s;
    font-family  : inherit;
    margin-bottom: 16px;
    display      : block;
}
.form-control-premium:focus {
    border-color: rgba(2,255,247,.4);
    box-shadow  : 0 0 0 3px rgba(2,255,247,.06);
}
.form-control-premium::placeholder { color: #374151; }
textarea.form-control-premium { resize: vertical; min-height: 130px; }
select.form-control-premium option { background: #0e1118; color: #e2e8f0; }
.is-invalid-premium { border-color: rgba(239,68,68,.4) !important; }
.form-error-text { font-size: 12px; color: #ef4444; margin-top: -12px; margin-bottom: 12px; }

/* ================================================================
   MAP SECTION — dark filter
   ================================================================ */
.map-wrapper {
    background   : rgba(14,17,24,.9);
    border       : 1px solid rgba(2,255,247,.08);
    border-radius: 16px;
    overflow     : hidden;
    margin       : 0 0 80px;
}
.map-header {
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 16px 24px;
    background : rgba(2,255,247,.04);
    border-bottom: 1px solid rgba(2,255,247,.08);
    font-size  : 14px;
    font-weight: 600;
    color      : #9ca3af;
}
.map-embed-wrapper iframe {
    filter : invert(90%) hue-rotate(170deg) saturate(1.2) brightness(.75);
    display: block;
}

/* ================================================================
   BREADCRUMB — new classes
   ================================================================ */
.breadcrumb-grid-overlay {
    position  : absolute;
    inset     : 0;
    background:
        linear-gradient(rgba(2,255,247,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2,255,247,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
    pointer-events: none;
}
.breadcrumb-trail {
    list-style : none;
    padding    : 0;
    margin     : 0;
    background : rgba(2,255,247,.04);
    border     : 1px solid rgba(2,255,247,.1);
    border-radius: 50px;
    padding    : 6px 16px;
    display    : inline-flex;
    gap        : 8px;
    align-items: center;
}
.breadcrumb-page-title {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : clamp(36px, 6vw, 72px);
    font-weight   : 800;
    color         : #fff;
    text-transform: uppercase;
    line-height   : 1;
    letter-spacing: -2px;
    margin        : 0;
}

/* ================================================================
   LEGAL PAGES (Privacy Policy / Terms)
   ================================================================ */
.legal-content { color: #9ca3af; line-height: 1.9; font-size: 15px; }
.legal-content h4 {
    font-family   : 'Big Shoulders Display', sans-serif;
    font-size     : 20px;
    font-weight   : 700;
    color         : #fff;
    text-transform: uppercase;
    margin        : 2rem 0 .75rem;
}
.legal-content ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.legal-content li { margin-bottom: .4rem; }
.legal-content a { color: #02fff7; text-decoration: underline; }
.legal-content strong { color: #d1d5db; }