/* ================================================================
   OWA LIRA RIDES — DESIGN SYSTEM
   Brand: Royal Blue (#4169E1) + Orange (#FF6B00)
   Typography: Outfit (headings) + Rubik (body)
   Style: Bold · Modern · Premium
   ================================================================ */

:root {
    /* ── Gray Scale ── */
    --black: #0f172a;
    --white: #ffffff;
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* ── Royal Blue Palette ── */
    --primary-1-50:  #eef2ff;
    --primary-1-100: #e0e7ff;
    --primary-1-200: #c7d2fe;
    --primary-1-300: #a5b4fc;
    --primary-1-400: #818cf8;
    --primary-1-500: #5a77ec;
    --primary-1-600: #4169E1;   /* PRIMARY */
    --primary-1-700: #3451c7;
    --primary-1-800: #2842a8;
    --primary-1-900: #1e3288;
    --primary-1-950: #131e5a;

    /* ── Orange Accent ── */
    --accent-50:  #fff7ed;
    --accent-100: #ffedd5;
    --accent-200: #fed7aa;
    --accent-300: #fdba74;
    --accent-400: #fb923c;
    --accent-500: #f97316;
    --accent-600: #FF6B00;      /* ACCENT */
    --accent-700: #e55f00;
    --accent-800: #cc5200;

    /* ── Status Colors ── */
    --status-color-green-600:  #22c55e;
    --status-color-yellow-600: #f59e0b;
    --status-color-red-600:    #ef4444;
    --status-color-blue-600:   #3b82f6;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 3px rgba(65, 105, 225, 0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 16px rgba(65, 105, 225, 0.12), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg:  0 8px 32px rgba(65, 105, 225, 0.18), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-xl:  0 20px 48px rgba(65, 105, 225, 0.22), 0 8px 24px rgba(0,0,0,0.08);
    --shadow-orange: 0 8px 24px rgba(255, 107, 0, 0.30);

    /* ── Gradients ── */
    --gradient-blue:   linear-gradient(135deg, #4169E1 0%, #3451c7 100%);
    --gradient-hero:   linear-gradient(135deg, #131e5a 0%, #1e3288 30%, #4169E1 70%, #5a77ec 100%);
    --gradient-orange: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    --gradient-mixed:  linear-gradient(135deg, #4169E1 0%, #FF6B00 100%);

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* ================================================================
   BASE
   ================================================================ */

html, body {
    font-family: 'Rubik', 'Inter', sans-serif;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
    color: var(--black);
    background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Rubik', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ================================================================
   UTILITY
   ================================================================ */

.three__line {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================================
   AUTOFILL
   ================================================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s;
}

.register-info input:-webkit-autofill,
.register-info input:-webkit-autofill:hover,
.register-info input:-webkit-autofill:focus,
.register-info input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #000000 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ================================================================
   NAV LINK HOVER (underline slide)
   ================================================================ */

.custom__border {
    position: relative;
    transition: color 0.25s ease;
}

.custom__border::before {
    position: absolute;
    content: "";
    background: var(--primary-1-600);
    width: 0;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    transition: 0.3s ease;
    opacity: 0;
    visibility: hidden;
    border-radius: 2px;
}

.custom__border:hover {
    color: var(--primary-1-600);
}

.custom__border:hover::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

.custom__border.active::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

.custom__border.active {
    color: var(--primary-1-600);
    font-weight: 600;
}

/* ================================================================
   IMAGE ZOOM ON HOVER
   ================================================================ */

.item {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
}

.item:hover {
    transform: perspective(400px) rotateX(0.09deg) rotateY(0deg) scaleX(1.06) scaleY(1.06) !important;
}

/* ================================================================
   DROPDOWN
   ================================================================ */

.custom__dropdown .drop__down {
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    z-index: 9;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
}

.custom__dropdown .drop__down.active,
.custom__dropdown:hover .drop__down {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

.custom__dropdown:hover > a,
.list__item:hover {
    color: var(--primary-1-600);
}

.custom__dropdown:hover > .custom__border::before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}

/* Dropdown box styling */
.custom__dropdown .drop__down {
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
}

/* ================================================================
   BUTTONS — Primary (Royal Blue)
   ================================================================ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 32px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--gradient-blue);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(65, 105, 225, 0.35);
    letter-spacing: 0.01em;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3451c7 0%, #2842a8 100%);
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.45);
    transform: translateY(-1px);
    color: #ffffff;
}

/* CTA button — Orange */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 32px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--gradient-orange);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-orange);
}

.btn-cta:hover {
    background: linear-gradient(135deg, #e55f00 0%, #cc5200 100%);
    box-shadow: 0 8px 28px rgba(255, 107, 0, 0.42);
    transform: translateY(-1px);
    color: #ffffff;
}

/* Outline button */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-1-600);
    background: transparent;
    border: 2px solid var(--primary-1-600);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-outline:hover {
    background: var(--primary-1-600);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(65, 105, 225, 0.30);
}

/* ================================================================
   HERO SECTION — World-class premium
   ================================================================ */

.hero-area {
    background: #070d1c;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* ── Hero image float animation ── */
@keyframes heroFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0px); }
}

/* ── Floating card animations (each slightly different speed/path) ── */
@keyframes floatCard1 {
    0%   { transform: translateY(0px) rotate(-1deg); }
    50%  { transform: translateY(-12px) rotate(0deg); }
    100% { transform: translateY(0px) rotate(-1deg); }
}

@keyframes floatCard2 {
    0%   { transform: translateY(0px) rotate(1deg); }
    50%  { transform: translateY(-10px) rotate(-0.5deg); }
    100% { transform: translateY(0px) rotate(1deg); }
}

@keyframes floatCard3 {
    0%   { transform: translateY(0px) scale(1); }
    50%  { transform: translateY(-8px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); }
}

/* ── CTA buttons ── */
.hero-btn-primary {
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}

.hero-btn-primary:hover {
    background: #e55f00 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(255, 107, 0, 0.50) !important;
}

.hero-btn-primary:active {
    transform: scale(0.97) !important;
}

.hero-btn-ghost:hover {
    border-color: #4169E1 !important;
    color: #4169E1 !important;
    background: rgba(65, 105, 225, 0.08) !important;
    transform: translateY(-2px);
}

/* ── Floating cards hover lift ── */
.hero-card:hover {
    transform: translateY(-4px) !important;
    animation-play-state: paused !important;
}

/* Wave fill (legacy) */
.wave-bg {
    fill: var(--primary-1-700);
}

/* ── Reduce motion preference ── */
@media (prefers-reduced-motion: reduce) {
    @keyframes heroFloat  { from { transform: none; } to { transform: none; } }
    @keyframes floatCard1 { from { transform: none; } to { transform: none; } }
    @keyframes floatCard2 { from { transform: none; } to { transform: none; } }
    @keyframes floatCard3 { from { transform: none; } to { transform: none; } }
}

/* ================================================================
   STATS / COUNT BAR
   ================================================================ */

.count-area .bg-white {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-100);
    overflow: hidden;
}

.count-item {
    transition: all 0.3s ease;
}

.count-item:hover {
    background: var(--gradient-blue) !important;
    color: #ffffff !important;
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.count-item:hover .text-gray-500 {
    color: rgba(255, 255, 255, 0.82) !important;
}

.count-item h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-1-600);
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.count-item:hover h2 {
    -webkit-text-fill-color: #ffffff;
    background: none;
    color: #ffffff;
}

/* ================================================================
   PLATFORM / TABS SECTION
   ================================================================ */

.platform-area {
    background: var(--white);
}

.platform-area h2 {
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tab-left-content .items h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--black);
}

.tab-left-content .items::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--gradient-orange);
    border-radius: 2px;
    margin-bottom: 10px;
}

/* ================================================================
   HERE WITH YOU GALLERY
   ================================================================ */

.border-rotate-box {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.border-rotate-box::after,
.border-rotate-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

.border-rotate-box::after {
    background: linear-gradient(120deg,
        rgba(65,105,225,0.4) 0%,
        rgba(255,107,0,0.5) 40%,
        rgba(65,105,225,0.6) 70%,
        rgba(255,107,0,0.3) 100%);
    opacity: 1;
    padding: 3px;
}

.border-rotate-box::before {
    background: linear-gradient(-120deg,
        rgba(255,107,0,0.5) 0%,
        rgba(65,105,225,0.6) 50%,
        rgba(255,107,0,0.4) 100%);
    opacity: 0;
    padding: 3px;
}

.border-rotate-box:hover::after { opacity: 0; }
.border-rotate-box:hover::before { opacity: 1; }

/* Feature content under gallery */
.here-with-you .content h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

/* ================================================================
   EARN RIDES SECTION
   ================================================================ */

.earn-rides-area {
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}

.earn-rides-area h2 {
    font-family: 'Outfit', sans-serif;
}

/* ================================================================
   DOWNLOAD SECTION
   ================================================================ */

.download-area {
    background: linear-gradient(135deg, var(--primary-1-950) 0%, var(--primary-1-900) 50%, #1a2a6e 100%) !important;
    position: relative;
}

.download-area h2 {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif;
}

.download-area p {
    color: rgba(255, 255, 255, 0.72) !important;
}

.download-area h6 {
    color: var(--accent-300) !important;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

.download-box {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg) !important;
    transition: all 0.3s ease;
}

.download-box:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(65, 105, 225, 0.40) !important;
    box-shadow: 0 8px 24px rgba(65, 105, 225, 0.20);
    transform: translateY(-2px);
}

/* Download button overrides */
.download-area .bg-primary1-600 {
    background: var(--gradient-orange) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.30);
}

.download-area .hover\:bg-primary1-700:hover {
    background: linear-gradient(135deg, #e55f00 0%, #cc5200 100%) !important;
}

/* ================================================================
   TESTIMONIALS / RIDER LOVED
   ================================================================ */

.rider-loved-area {
    background: var(--white);
}

.rider-loved-area h2 {
    font-family: 'Outfit', sans-serif;
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Review cards */
.content-box {
    background: linear-gradient(135deg, var(--primary-1-50) 0%, #f0f4ff 100%) !important;
    border: 1px solid var(--primary-1-100);
    border-radius: var(--radius-lg) !important;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.content-box:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-1-200);
    transform: translateY(-3px);
}

/* Reviewer name accent */
.content-box .text-primary1-600 {
    color: var(--accent-600) !important;
    font-weight: 600;
}

/* Swiper */
.rider-slide .swiper-wrapper,
.rider-slide-2 .swiper-wrapper {
    transition-timing-function: linear !important;
}

.rider-slide .swiper-slide,
.rider-slide-2 .swiper-slide {
    width: 340px;
}

/* ================================================================
   TRUSTED DELIVERY CTA BAND
   ================================================================ */

.trusted-delivery-area {
    background: linear-gradient(135deg, var(--primary-1-50) 0%, var(--accent-50) 100%) !important;
    border-top: 1px solid var(--primary-1-100);
    border-bottom: 1px solid var(--primary-1-100);
}

.trusted-delivery-area h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--primary-1-900);
}

.trusted-delivery-area .text-gray-500 {
    color: var(--primary-1-600) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ================================================================
   BLOG CARDS
   ================================================================ */

.blog-box {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.blog-box:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.blog-box .blog-content {
    border-top: 3px solid transparent;
    background: white;
    transition: border-color 0.25s ease;
}

.blog-box:hover .blog-content {
    border-top-color: var(--primary-1-600);
}

.blog-box h4:hover,
.blog-box h4 a:hover {
    color: var(--primary-1-600) !important;
}

/* Category tags */
.update-time .text-\[\#152934\] {
    background: var(--primary-1-50);
    color: var(--primary-1-700) !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ================================================================
   ACCORDION
   ================================================================ */

.ac__items.active {
    box-shadow: 0 4px 16px rgba(65, 105, 225, 0.14);
    border-color: var(--primary-1-200) !important;
}

.ac__close__icon::before {
    background: var(--black);
}

.ac__close__icon::after {
    background: var(--black);
}

.ac__close__icon.ac::before,
.ac__close__icon.ac::after {
    border-color: var(--primary-1-600);
}

.ac__items p.ac {
    color: var(--primary-1-600);
}

.tab__button__2:hover,
.tab__button__2.active {
    border: 1px solid var(--primary-1-600);
}

/* ================================================================
   SVG WAVE ANIMATION
   ================================================================ */

.path-0 {
    animation: pathAnim-0 12s linear infinite;
}

@keyframes pathAnim-0 {
    0% {
        d: path("M 0,700 L 0,262 C 57.4166952937135,263.39058742700104 114.833390587427,264.7811748540021 180,271 C 245.166609412573,277.2188251459979 318.08313294400546,288.2658880109928 383,283 C 447.91686705599454,277.7341119890072 504.834077636551,256.1552731020268 581,209 C 657.165922363449,161.8447268979732 752.5805565097904,89.11301958090007 834,132 C 915.4194434902096,174.88698041909993 982.8436963242871,333.392648574373 1048,389 C 1113.156303675713,444.607351425627 1176.0446581930607,397.31638612160776 1241,359 C 1305.9553418069393,320.68361387839224 1372.9776709034695,291.3418069391961 1440,262 L 1440,700 L 0,700 Z");
    }
    25% {
        d: path("M 0,700 L 0,262 C 68.62590175197528,203.54105118515974 137.25180350395055,145.08210237031946 197,149 C 256.74819649604945,152.91789762968054 307.6186877361732,219.21264170388184 383,268 C 458.3813122638268,316.78735829611816 558.2734455513569,348.0673308141532 627,356 C 695.7265544486431,363.9326691858468 733.287530058399,348.51803503950526 806,317 C 878.712469941601,285.48196496049474 986.5764342150464,237.8605290278255 1056,219 C 1125.4235657849536,200.1394709721745 1156.4067330814153,210.0398488491927 1214,222 C 1271.5932669185847,233.9601511508073 1355.7966334592925,247.98007557540365 1440,262 L 1440,700 L 0,700 Z");
    }
    50% {
        d: path("M 0,700 L 0,262 C 59.19821367227756,323.49295774647885 118.39642734455512,384.98591549295776 177,364 C 235.60357265544488,343.01408450704224 293.61250429405703,239.54929577464785 379,224 C 464.38749570594297,208.45070422535215 577.1535554792167,280.81690140845075 644,322 C 710.8464445207833,363.18309859154925 731.7732737890759,373.1830985915493 799,369 C 866.2267262109241,364.8169014084507 979.7533493644796,346.45070422535207 1058,291 C 1136.2466506355204,235.5492957746479 1179.2133287530057,143.01408450704227 1237,132 C 1294.7866712469943,120.98591549295773 1367.393335623497,191.49295774647885 1440,262 L 1440,700 L 0,700 Z");
    }
    75% {
        d: path("M 0,700 L 0,262 C 89.0443146684988,318.79148059086225 178.0886293369976,375.5829611817245 234,348 C 289.9113706630024,320.4170388182755 312.68979732050843,208.4596358639643 378,175 C 443.31020267949157,141.5403641360357 551.1521813809687,186.5784953624184 629,198 C 706.8478186190313,209.4215046375816 754.7014771556167,187.22638268636203 813,220 C 871.2985228443833,252.77361731363797 940.0419099965648,340.51597389213333 1015,325 C 1089.9580900034352,309.48402610786667 1171.1308828581246,190.70972174510476 1243,163 C 1314.8691171418754,135.29027825489524 1377.4345585709377,198.64513912744764 1440,262 L 1440,700 L 0,700 Z");
    }
    100% {
        d: path("M 0,700 L 0,262 C 57.4166952937135,263.39058742700104 114.833390587427,264.7811748540021 180,271 C 245.166609412573,277.2188251459979 318.08313294400546,288.2658880109928 383,283 C 447.91686705599454,277.7341119890072 504.834077636551,256.1552731020268 581,209 C 657.165922363449,161.8447268979732 752.5805565097904,89.11301958090007 834,132 C 915.4194434902096,174.88698041909993 982.8436963242871,333.392648574373 1048,389 C 1113.156303675713,444.607351425627 1176.0446581930607,397.31638612160776 1241,359 C 1305.9553418069393,320.68361387839224 1372.9776709034695,291.3418069391961 1440,262 L 1440,700 L 0,700 Z");
    }
}

/* ================================================================
   ROAD SVG / DASHES
   ================================================================ */

.road-svg {
    max-width: 675px;
    max-height: 290px;
    position: absolute;
}

.line-dash-svg {
    max-width: 665px;
    max-height: 315px;
    position: absolute;
    bottom: -53%;
    left: 17%;
}

.line-dash-path {
    stroke: var(--primary-1-300);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    fill: transparent;
    animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
    to { stroke-dashoffset: -10; }
}

.arrow { fill: var(--primary-1-300); }

/* ================================================================
   ORANGE BADGE / PILL
   ================================================================ */

.badge-orange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--accent-50);
    border: 1px solid var(--accent-200);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.badge-blue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--primary-1-50);
    border: 1px solid var(--primary-1-200);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-1-700);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ================================================================
   SECTION HEADINGS — global accent rule
   ================================================================ */

.section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-bottom: 10px;
}

.section-heading {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

/* ================================================================
   ORANGE HIGHLIGHT SPAN (for hero inline text accent)
   ================================================================ */

.text-orange-accent {
    color: var(--accent-500) !important;
}

/* ================================================================
   SCROLL-TO-TOP BUTTON
   ================================================================ */

#scrollToTop,
.scroll-to-top {
    background: var(--gradient-blue) !important;
    border-color: var(--primary-1-600) !important;
    box-shadow: 0 4px 14px rgba(65, 105, 225, 0.35) !important;
}

#scrollToTop:hover,
.scroll-to-top:hover {
    background: var(--gradient-orange) !important;
    box-shadow: var(--shadow-orange) !important;
}