:root{--navy:#061323;--navy-2:#0a1d33;--blue:#1677ff;--cyan:#38c9ff;--ink:#10243e;--muted:#66778d;--line:#dce5ef;--soft:#f3f7fb;--white:#fff;--radius:18px;--shadow:0 20px 60px rgba(6,19,35,.12);--container:min(1180px,calc(100% - 48px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Manrope,Tajawal,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}html[dir=rtl] body{font-family:Tajawal,Manrope,sans-serif}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}img{max-width:100%}.container{width:var(--container);margin-inline:auto}.skip-link{position:fixed;top:-100px;left:20px;background:#fff;padding:10px 16px;z-index:1000}.skip-link:focus{top:20px}.site-header{position:fixed;inset:0 0 auto;z-index:100;height:92px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);transition:.3s}.site-header.scrolled,.page-hero~* .site-header{height:76px;background:rgba(6,19,35,.94);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.14)}.nav-wrap{height:100%;display:flex;align-items:center;gap:42px}.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}.brand-name{font-size:1.42rem;font-weight:800;letter-spacing:-.05em}.brand-name span{color:var(--cyan)}.brand-mark{width:29px;height:29px;position:relative;display:inline-block}.brand-mark i{position:absolute;width:8px;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:4px;transform:skewY(-27deg)}.brand-mark i:nth-child(1){height:15px;left:1px;bottom:1px}.brand-mark i:nth-child(2){height:24px;left:11px;bottom:3px}.brand-mark i:nth-child(3){height:15px;right:0;top:1px}.main-nav{display:flex;align-items:center;gap:31px;margin-inline:auto}.main-nav a{font-size:.9rem;font-weight:600;opacity:.78;position:relative;padding-block:10px;transition:.2s}.main-nav a:after{content:"";position:absolute;height:2px;inset-inline:0;bottom:2px;background:var(--cyan);transform:scaleX(0);transition:.2s}.main-nav a:hover,.main-nav a.active{opacity:1}.main-nav a.active:after,.main-nav a:hover:after{transform:scaleX(1)}.nav-actions{display:flex;align-items:center;gap:18px}.lang-link{font-size:.88rem;font-weight:700}.button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,var(--blue),#0756ca);color:#fff;font-weight:700;font-family:inherit;font-size:.92rem;padding:15px 23px;border-radius:8px;box-shadow:0 10px 25px rgba(22,119,255,.25);transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(22,119,255,.32)}.button-small{padding:11px 17px;font-size:.82rem}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:25px;height:2px;margin:5px;background:#fff}.hero{min-height:760px;height:92vh;max-height:920px;position:relative;display:flex;align-items:center;background:var(--navy);color:#fff;overflow:hidden}.hero-media{position:absolute;inset:0;background:url('../images/hero-datacenter.webp') center/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,13,25,.96) 0%,rgba(3,13,25,.74) 43%,rgba(3,13,25,.12) 78%),linear-gradient(0deg,rgba(3,13,25,.55),transparent 55%)}html[dir=rtl] .hero-shade{background:linear-gradient(270deg,rgba(3,13,25,.96) 0%,rgba(3,13,25,.74) 43%,rgba(3,13,25,.12) 78%),linear-gradient(0deg,rgba(3,13,25,.55),transparent 55%)}.hero-content{position:relative;z-index:2;padding-top:75px}.eyebrow,.section-kicker{font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px;margin-bottom:20px}.eyebrow{color:#9bdcff}.eyebrow span{width:30px;height:1px;background:var(--cyan)}html[dir=rtl] .eyebrow,html[dir=rtl] .section-kicker{letter-spacing:0}.hero h1{font-size:clamp(3.2rem,6vw,6.5rem);line-height:1.02;max-width:830px;margin:0 0 28px;letter-spacing:-.06em;font-weight:700}.hero p{max-width:680px;color:#c9d8e8;font-size:1.12rem;line-height:1.8;margin:0}.hero-actions{display:flex;align-items:center;gap:30px;margin-top:40px}.text-link,.arrow-link{font-weight:700;display:inline-flex;align-items:center;gap:11px}.text-link span,.arrow-link span{transition:transform .2s}html[dir=ltr] .text-link:hover span,html[dir=ltr] .arrow-link:hover span{transform:translateX(5px)}html[dir=rtl] .text-link:hover span,html[dir=rtl] .arrow-link:hover span{transform:translateX(-5px)}.hero-bottom{position:absolute;z-index:2;inset:auto 0 0;border-top:1px solid rgba(255,255,255,.13);padding:20px 0;color:#a9bed4;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.hero-bottom .container{display:flex;align-items:center;gap:12px}.pulse{width:8px;height:8px;border-radius:50%;background:#32e4a3;box-shadow:0 0 0 6px rgba(50,228,163,.12)}.section{padding:120px 0}.split-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:110px;align-items:start}.section h2,.cta-section h2{font-size:clamp(2.25rem,4vw,4.3rem);line-height:1.12;letter-spacing:-.05em;margin:0;font-weight:700}.intro-copy p,.section-heading>p,.why-copy>p,.cta-section p,.contact-details>p{font-size:1.04rem;color:var(--muted);margin:5px 0 28px}.arrow-link{color:var(--blue);font-size:.92rem}.services-section{background:var(--soft)}.section-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:90px;align-items:end;margin-bottom:58px}.section-heading>p{margin:0 0 8px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}html[dir=rtl] .service-grid{border-left:0;border-right:1px solid var(--line)}.service-card{min-height:340px;padding:32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;background:rgba(255,255,255,.35);transition:.3s}.service-card:hover{background:#fff;transform:translateY(-5px);box-shadow:var(--shadow);z-index:2}.card-number{font-size:.72rem;color:#8a9aae;font-weight:700}.service-icon{width:58px;height:58px;margin:52px 0 31px;position:relative;border:1px solid #b9dafd;border-radius:15px;transform:rotate(45deg)}.service-icon:after,.service-icon span{content:"";position:absolute;inset:12px;border:2px solid var(--blue);border-radius:7px}.service-icon span{inset:22px -8px -8px 22px;border-color:var(--cyan);opacity:.6}.service-card h3{font-size:1.28rem;margin:0 0 11px}.service-card p{color:var(--muted);font-size:.9rem;margin:0;max-width:290px}.service-card>a{position:absolute;inset:auto 29px 27px auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--blue);box-shadow:0 5px 18px rgba(15,50,90,.1)}html[dir=rtl] .service-card>a{right:auto;left:29px}.all-link{margin-top:38px}.why-section{background:var(--navy);color:#fff;overflow:hidden}.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.why-visual{height:510px;display:grid;place-items:center;position:relative}.why-visual:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(22,119,255,.3),transparent 65%);filter:blur(8px)}.visual-orbit{width:300px;height:300px;border:1px solid rgba(56,201,255,.27);border-radius:50%;display:grid;place-items:center;position:relative;animation:float 5s ease-in-out infinite}.visual-orbit:before,.visual-orbit:after{content:"";position:absolute;border:1px solid rgba(56,201,255,.18);border-radius:50%}.visual-orbit:before{inset:35px}.visual-orbit:after{inset:-55px}.visual-orbit b{width:104px;height:104px;border-radius:28px;background:linear-gradient(145deg,var(--blue),#06336f);display:grid;place-items:center;font-size:2rem;box-shadow:0 0 60px rgba(22,119,255,.45)}.visual-orbit span{position:absolute;width:12px;height:12px;background:var(--cyan);border-radius:50%;box-shadow:0 0 18px var(--cyan)}.visual-orbit span:nth-child(1){top:-6px}.visual-orbit span:nth-child(2){right:18px;bottom:34px}.visual-orbit span:nth-child(3){left:-6px;top:48%}.section-kicker.light{color:var(--cyan)}.why-copy>p{color:#a9bed4;max-width:640px}.value-list{margin-top:43px}.value-list div{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.13);align-items:center}.value-list strong{color:var(--cyan);font-size:.73rem}.value-list span{font-weight:600}.process-title{max-width:720px;margin-bottom:70px!important}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.process-step{padding:28px 28px 10px;border-top:1px solid var(--line);position:relative}.process-step:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue);top:-4px;inset-inline-start:28px}.process-step>span{color:var(--blue);font-size:.75rem;font-weight:700}.process-step h3{font-size:1.05rem;margin:30px 0 10px}.process-step p{color:var(--muted);font-size:.88rem}.cta-section{background:linear-gradient(135deg,#0d65dd,#088ac7);color:#fff;padding:85px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:60px}.cta-inner>div{max-width:780px}.cta-section h2{font-size:clamp(2.2rem,4vw,4rem)}.cta-section p{color:#d8efff;margin-bottom:0}.button-light{background:#fff;color:var(--navy);white-space:nowrap}.site-footer{background:#04101f;color:#fff;padding:76px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .8fr;gap:90px;padding-bottom:65px}.footer-brand{margin-bottom:22px}.footer-grid p{color:#8196ac;max-width:400px;font-size:.88rem}.footer-grid h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#7f96ae;margin:5px 0 20px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:12px}.footer-grid a:not(.brand){color:#c4d2df;font-size:.9rem}.footer-grid a:hover{color:var(--cyan)}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;color:#647a91;font-size:.75rem}.page-hero{background:radial-gradient(circle at 78% 0,rgba(22,119,255,.35),transparent 38%),var(--navy);color:#fff;padding:200px 0 100px}.page-hero h1{font-size:clamp(3rem,5vw,5.5rem);line-height:1.06;letter-spacing:-.055em;max-width:950px;margin:0 0 28px}.page-hero p{color:#afc2d6;font-size:1.1rem;max-width:700px}.soft-section{background:var(--soft)}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.principle-grid article{background:#fff;padding:42px;border-radius:var(--radius);box-shadow:0 12px 40px rgba(15,49,85,.06)}.principle-grid span,.detail-number{color:var(--blue);font-size:.73rem;font-weight:700}.principle-grid h3{font-size:1.4rem;margin:35px 0 12px}.principle-grid p{color:var(--muted)}.service-detail-list{border-top:1px solid var(--line)}.service-detail{display:grid;grid-template-columns:90px 1fr 50px;gap:30px;padding:52px 16px;border-bottom:1px solid var(--line);align-items:start;scroll-margin-top:100px;transition:.25s}.service-detail:hover{background:var(--soft);padding-inline:28px}.service-detail h2{font-size:2rem;margin:0 0 12px}.service-detail p{color:var(--muted);max-width:720px;margin:0}.service-detail ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;padding-inline-start:20px;margin-top:24px;color:var(--muted)}.detail-arrow{color:var(--blue);font-size:1.4rem}.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px}.contact-details h2{font-size:3rem}.contact-details>a,.contact-details>div{display:flex;flex-direction:column;padding:20px 0;border-top:1px solid var(--line)}.contact-details small{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.contact-details strong{margin-top:5px}.contact-form{background:var(--soft);padding:42px;border-radius:var(--radius)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-form label{display:block;font-size:.78rem;font-weight:700;margin-bottom:18px}.contact-form input,.contact-form textarea{width:100%;border:1px solid #cfdae6;background:#fff;border-radius:8px;padding:14px 15px;margin-top:7px;font:inherit;font-size:.92rem;outline:0}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,119,255,.1)}.contact-form textarea{resize:vertical}.form-alert{padding:13px 16px;border-radius:8px;margin-bottom:20px;font-size:.88rem}.form-alert.success{background:#daf8eb;color:#0d6848}.form-alert.error{background:#ffe5e5;color:#942727}.hp{position:absolute;left:-9999px}
/* Content remains visible if JavaScript fails */
.reveal {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

/* Hide elements only when animations started successfully */
html.animations-ready .reveal {
    opacity: 0;
    transform: translateY(22px);
}

html.animations-ready .reveal.visible {
    opacity: 1;
    transform: none;
}

@media(max-width:980px){:root{--container:min(100% - 36px,760px)}.nav-actions .button{display:none}.main-nav{gap:20px}.hero{min-height:700px}.hero h1{max-width:650px}.section{padding:90px 0}.split-layout,.section-heading,.why-grid,.contact-grid{grid-template-columns:1fr;gap:45px}.service-grid{grid-template-columns:1fr 1fr}.why-visual{height:380px}.process-grid{grid-template-columns:1fr 1fr;gap:28px 0}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.cta-inner{align-items:flex-start}.page-hero{padding-top:170px}}
@media(max-width:720px){:root{--container:calc(100% - 32px)}.site-header{height:74px}.nav-wrap{justify-content:space-between}.menu-toggle{display:block;order:3}.main-nav{position:fixed;inset:74px 0 0;background:var(--navy);display:flex;flex-direction:column;align-items:flex-start;padding:45px 28px;gap:14px;transform:translateX(100%);transition:.3s}html[dir=rtl] .main-nav{transform:translateX(-100%)}.main-nav.open{transform:none}.main-nav a{font-size:1.35rem;width:100%;border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0}.nav-actions{margin-inline-start:auto}.lang-link{font-size:.8rem}.hero{height:auto;min-height:760px}.hero-media{background-position:65% center}.hero-shade,.hero-shade{background:linear-gradient(0deg,rgba(3,13,25,.92),rgba(3,13,25,.55)),linear-gradient(90deg,rgba(3,13,25,.9),transparent)}.hero h1{font-size:3.2rem}.hero p{font-size:1rem}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.section{padding:75px 0}.section h2{font-size:2.45rem}.service-grid{grid-template-columns:1fr}.service-card{min-height:300px}.section-heading{margin-bottom:40px}.why-visual{height:330px}.visual-orbit{width:230px;height:230px}.process-grid{grid-template-columns:1fr}.process-step{padding-bottom:24px}.cta-inner{flex-direction:column}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:8px}.principle-grid{grid-template-columns:1fr}.service-detail{grid-template-columns:44px 1fr}.detail-arrow{display:none}.service-detail ul{grid-template-columns:1fr}.contact-form{padding:26px 20px}.form-row{grid-template-columns:1fr}.page-hero{padding:145px 0 75px}.page-hero h1{font-size:3rem}.contact-details h2{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.visual-orbit{animation:none}}

/* Contact information */
.contact-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.contact-item small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-item strong {
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.7;
}

a.contact-item:hover strong {
    color: var(--blue);
}

/* Google map section */
.contact-map {
    margin-top: 90px;
}

.contact-map-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 32px;
}

.contact-map-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.contact-map-heading p {
    margin: 0;
    color: var(--muted);
}

.map-frame {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;

    border-radius: 18px;
    background: var(--soft);
    box-shadow: 0 20px 60px rgba(6, 19, 35, 0.12);
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Footer address */
.footer-contact p {
    margin: 0;
    max-width: 300px;
    line-height: 1.8;
}

/* Responsive contact map */
@media (max-width: 720px) {
    .contact-map {
        margin-top: 65px;
    }

    .contact-map-heading {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .map-frame {
        height: 360px;
        border-radius: 12px;
    }
}



3. ADD THIS CSS TO THE END OF assets/css/style.css
-------------------------------------------------

/* =========================================================
   LINKPRO CONTACT PAGE - UNIFIED REDESIGN
   ========================================================= */

.contact-section {
    background:
        radial-gradient(circle at 90% 5%, rgba(22, 119, 255, 0.07), transparent 28%),
        #ffffff;
}

.contact-unified-grid {
    display: grid;
    grid-template-columns: minmax(330px, 0.82fr) minmax(520px, 1.18fr);
    gap: 32px;
    align-items: stretch;
}

.contact-info-card,
.contact-form-panel {
    border: 1px solid #dfe8f2;
    border-radius: 24px;
    box-shadow: 0 22px 65px rgba(6, 19, 35, 0.09);
}

.contact-info-card {
    position: relative;
    overflow: hidden;
    padding: 48px;
    color: #ffffff;
    background:
        radial-gradient(circle at 100% 0, rgba(56, 201, 255, 0.22), transparent 35%),
        linear-gradient(145deg, #07182b 0%, #0a294a 100%);
}

.contact-info-card::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(56, 201, 255, 0.18);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(56, 201, 255, 0.04),
        0 0 0 70px rgba(56, 201, 255, 0.025);
    pointer-events: none;
}

html[dir="rtl"] .contact-info-card::after {
    right: auto;
    left: -90px;
}

.contact-info-card .section-kicker {
    color: #53d4ff;
}

.contact-info-card h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.25rem, 3.5vw, 3.65rem);
    line-height: 1.08;
}

.contact-introduction {
    margin: 20px 0 34px;
    color: #b8c9da;
    font-size: 0.98rem;
}

.contact-list {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-row {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-row-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #53d4ff;
    background: rgba(56, 201, 255, 0.1);
    border: 1px solid rgba(56, 201, 255, 0.17);
    border-radius: 10px;
    font-size: 0.9rem;
}

.contact-row div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.contact-row small {
    color: #8fa7be;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html[dir="rtl"] .contact-row small {
    letter-spacing: 0;
}

.contact-row strong {
    color: #ffffff;
    font-size: 0.88rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

a.contact-row:hover strong {
    color: #53d4ff;
}

.facebook-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 16px;
    color: #ffffff;
    background: #1877f2;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(24, 119, 242, 0.24);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.facebook-button:hover {
    transform: translateY(-2px);
    background: #0f67d8;
}

.facebook-button svg {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
}

.contact-form-panel {
    padding: 48px;
    background: #f4f8fc;
}

.contact-form-heading {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 32px;
}

.form-label-number {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #1677ff;
    background: rgba(22, 119, 255, 0.09);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 800;
}

.contact-form-heading h2 {
    margin: 0 0 7px;
    color: #10243e;
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.contact-form-heading p {
    margin: 0;
    color: #66778d;
    font-size: 0.92rem;
}

.redesigned-contact-form {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.redesigned-contact-form label {
    margin-bottom: 17px;
    color: #243b55;
    font-size: 0.77rem;
}

.redesigned-contact-form input,
.redesigned-contact-form textarea {
    min-height: 52px;
    margin-top: 7px;
    border: 1px solid #cbd9e8;
    border-radius: 10px;
    background: #ffffff;
}

.redesigned-contact-form textarea {
    min-height: 160px;
}

.redesigned-contact-form input:focus,
.redesigned-contact-form textarea:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1);
}

.contact-submit-button {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
}

.contact-location {
    margin-top: 42px;
    padding: 42px;
    border: 1px solid #dfe8f2;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 22px 65px rgba(6, 19, 35, 0.08);
}

.contact-location-heading {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 0.7fr);
    gap: 50px;
    align-items: end;
    margin-bottom: 28px;
}

.contact-location-heading h2 {
    margin: 0;
    color: #10243e;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    line-height: 1.1;
}

.location-address {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    background: #f4f8fc;
    border-radius: 12px;
}

.location-address span {
    color: #1677ff;
    font-size: 1.1rem;
}

.location-address p {
    margin: 0;
    color: #52677e;
    font-size: 0.9rem;
}

.redesigned-map-frame {
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 16px;
    background: #eaf1f8;
}

.redesigned-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 980px) {
    .contact-unified-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-card,
    .contact-form-panel {
        padding: 38px;
    }

    .contact-location-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 720px) {
    .contact-section {
        padding-top: 60px;
    }

    .contact-unified-grid {
        gap: 20px;
    }

    .contact-info-card,
    .contact-form-panel,
    .contact-location {
        padding: 26px 20px;
        border-radius: 16px;
    }

    .contact-info-card h2 {
        font-size: 2.3rem;
    }

    .contact-form-heading {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .redesigned-contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-location {
        margin-top: 20px;
    }

    .redesigned-map-frame {
        height: 350px;
        border-radius: 12px;
    }
}


/* =========================================================
   LINKPRO ABOUT PAGE REDESIGN
   ========================================================= */

.about-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(120deg, rgba(6, 19, 35, 0.98), rgba(7, 38, 69, 0.94)),
        #061323;
}

.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(56, 201, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 201, 255, 0.16) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent, #000 48%, #000);
}

html[dir="rtl"] .about-hero::before {
    mask-image: linear-gradient(to left, transparent, #000 48%, #000);
}

.about-hero-glow {
    position: absolute;
    top: 12%;
    right: 8%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(22, 119, 255, 0.19);
    filter: blur(90px);
}

html[dir="rtl"] .about-hero-glow {
    right: auto;
    left: 8%;
}

.about-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 90px;
    align-items: center;
    padding-top: 95px;
}

.about-hero-copy h1 {
    max-width: 780px;
    margin: 0 0 28px;
    font-size: clamp(3.4rem, 6vw, 6.4rem);
    font-weight: 700;
    line-height: 1.01;
    letter-spacing: -0.06em;
}

html[dir="rtl"] .about-hero-copy h1 {
    letter-spacing: 0;
}

.about-hero-copy > p {
    max-width: 660px;
    margin: 0;
    color: #b9cbdd;
    font-size: 1.08rem;
}

.about-hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 38px;
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.about-hero-visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
}

.about-visual-ring {
    position: absolute;
    border: 1px solid rgba(56, 201, 255, 0.26);
    border-radius: 50%;
}

.ring-one {
    width: 350px;
    height: 350px;
}

.ring-two {
    width: 270px;
    height: 270px;
    border-style: dashed;
}

.about-visual-core {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 45px;
    background: linear-gradient(145deg, rgba(22, 119, 255, 0.95), rgba(6, 43, 83, 0.95));
    box-shadow: 0 30px 80px rgba(22, 119, 255, 0.38);
}

.about-visual-core span,
.about-visual-core strong {
    font-size: 2rem;
    letter-spacing: -0.06em;
}

.about-visual-core strong {
    color: #53d4ff;
}

.about-visual-core small {
    width: 100%;
    margin-top: 4px;
    color: #cdefff;
    text-align: center;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.about-node {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #061323;
    border-radius: 50%;
    background: #53d4ff;
    box-shadow: 0 0 20px #38c9ff;
}

.node-one { top: 38px; left: 50%; }
.node-two { right: 20px; bottom: 110px; }
.node-three { left: 28px; bottom: 120px; }

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    gap: 110px;
    align-items: start;
}

.about-story-heading h2,
.about-section-heading h2,
.process-centered-heading h2 {
    margin: 0;
    color: #10243e;
    font-size: clamp(2.5rem, 4.5vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

html[dir="rtl"] .about-story-heading h2,
html[dir="rtl"] .about-section-heading h2,
html[dir="rtl"] .process-centered-heading h2 {
    letter-spacing: 0;
}

.about-story-content p {
    color: #66778d;
    font-size: 0.98rem;
}

.about-story-content .story-lead {
    margin-top: 4px;
    color: #243b55;
    font-size: 1.16rem;
    font-weight: 600;
}

.about-story-line {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #dce5ef;
}

.about-story-line span {
    width: 36px;
    height: 2px;
    flex-shrink: 0;
    background: #1677ff;
}

.about-story-line strong {
    color: #10243e;
    font-size: 0.86rem;
}

.about-values-section {
    padding: 110px 0;
    color: #ffffff;
    background: #061323;
}

.about-section-heading {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 55px;
}

.about-section-heading h2 {
    color: #ffffff;
}

.about-section-heading > p {
    margin: 0 0 7px;
    color: #a8bbcf;
}

.about-section-heading.dark h2 {
    color: #10243e;
}

.about-section-heading.dark > p {
    color: #66778d;
}

.about-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-value-card {
    min-height: 275px;
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.about-value-card.featured {
    background: linear-gradient(145deg, #1677ff, #0759c9);
    border-color: transparent;
    box-shadow: 0 22px 60px rgba(22, 119, 255, 0.25);
}

.about-value-card:hover {
    transform: translateY(-7px);
    border-color: rgba(56, 201, 255, 0.45);
}

.about-value-card > span {
    color: #53d4ff;
    font-size: 0.72rem;
    font-weight: 800;
}

.about-value-card.featured > span {
    color: #d7f5ff;
}

.about-value-card h3 {
    margin: 70px 0 10px;
    font-size: 1.45rem;
}

.about-value-card p {
    margin: 0;
    color: #9fb2c6;
    font-size: 0.9rem;
}

.about-value-card.featured p {
    color: #dceeff;
}

.about-services-section {
    background: #f3f7fb;
}

.about-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.about-service-card {
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    padding: 32px;
    overflow: hidden;
    border: 1px solid #e0e8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(6, 19, 35, 0.055);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 55px rgba(6, 19, 35, 0.12);
}

.about-service-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.about-service-top > span {
    color: #9aaabd;
    font-size: 0.7rem;
    font-weight: 800;
}

.about-service-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #1677ff;
    border-radius: 15px;
    background: rgba(22, 119, 255, 0.08);
}

.about-service-icon svg {
    width: 29px !important;
    height: 29px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-service-card h3 {
    margin: 35px 0 12px;
    color: #10243e;
    font-size: 1.28rem;
    line-height: 1.3;
}

.about-service-card p {
    margin: 0 0 25px;
    color: #66778d;
    font-size: 0.88rem;
}

.about-service-card > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 17px;
    color: #1677ff;
    border-top: 1px solid #e3eaf2;
    font-size: 0.78rem;
    font-weight: 800;
}

.about-service-card:last-child {
    grid-column: 2 / 3;
}

.process-centered-heading {
    max-width: 830px;
    margin: 0 auto 70px;
    text-align: center;
}

.process-centered-heading .section-kicker {
    justify-content: center;
}

.process-centered-heading p {
    max-width: 620px;
    margin: 22px auto 0;
    color: #66778d;
}

.about-process-grid {
    display: grid;
    grid-template-columns: 1fr 70px 1fr 70px 1fr 70px 1fr;
    align-items: start;
}

.about-process-step {
    text-align: center;
}

.process-circle {
    width: 190px;
    height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 13px;
    margin: 0 auto 24px;
    border: 1px solid #dde7f1;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f2f6fa);
    box-shadow: 0 18px 45px rgba(6, 19, 35, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.about-process-step:hover .process-circle {
    transform: translateY(-7px);
    border-color: #79cfff;
}

.process-circle span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #ffffff;
    border-radius: 50%;
    background: #1677ff;
    font-size: 0.7rem;
    font-weight: 800;
}

.process-circle strong {
    max-width: 145px;
    color: #10243e;
    font-size: 0.95rem;
}

.about-process-step > p {
    max-width: 220px;
    margin: 0 auto;
    color: #66778d;
    font-size: 0.83rem;
}

.process-connector {
    padding-top: 94px;
}

.process-connector span {
    display: block;
    width: 100%;
    border-top: 1px dashed #83cfff;
}

.about-cta-section {
    position: relative;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .about-hero-layout {
        grid-template-columns: 1fr 0.72fr;
        gap: 35px;
    }

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

    .about-service-card:last-child {
        grid-column: auto;
    }

    .about-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 38px;
    }

    .process-connector {
        display: none;
    }
}

@media (max-width: 820px) {
    .about-hero {
        min-height: auto;
        padding: 165px 0 90px;
    }

    .about-hero-layout,
    .about-story-grid,
    .about-section-heading {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .about-hero-layout {
        padding-top: 0;
    }

    .about-hero-visual {
        min-height: 360px;
    }

    .about-section-heading {
        margin-bottom: 42px;
    }

    .about-value-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .about-hero-copy h1 {
        font-size: 3.25rem;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-hero-visual {
        min-height: 300px;
        transform: scale(0.82);
    }

    .about-value-card {
        min-height: 245px;
        padding: 30px;
    }

    .about-value-card h3 {
        margin-top: 50px;
    }

    .about-service-grid,
    .about-process-grid {
        grid-template-columns: 1fr;
    }

    .about-service-card {
        min-height: 310px;
    }

    .process-circle {
        width: 175px;
        height: 175px;
    }
}


.hero-network {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    animation: networkCanvasIn 1.5s ease 0.8s forwards;
}

.hero-media {
    transform: scale(1.06);
    animation: heroImageEntrance 2.2s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
    will-change: transform;
}

.hero-shade {
    z-index: 1;
}

.hero-content {
    z-index: 3;
}

.hero-bottom {
    z-index: 3;
}

/* Cinematic hero text entrance */
.hero-animate .hero-eyebrow,
.hero-animate .hero-title,
.hero-animate .hero-description,
.hero-animate .hero-buttons {
    opacity: 0;
    transform: translateY(28px);
    animation: heroContentEntrance 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.hero-animate .hero-eyebrow {
    animation-delay: 0.2s;
}

.hero-animate .hero-title {
    animation-delay: 0.38s;
}

.hero-animate .hero-description {
    animation-delay: 0.58s;
}

.hero-animate .hero-buttons {
    animation-delay: 0.76s;
}

.hero-eyebrow > span {
    transform-origin: left center;
    animation: heroEyebrowLine 1s ease 0.9s both;
}

html[dir="rtl"] .hero-eyebrow > span {
    transform-origin: right center;
}

/* Moving blue glow across the hero */
.hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -30%;
    left: -30%;
    width: 42%;
    height: 160%;
    pointer-events: none;
    opacity: 0.16;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(56, 201, 255, 0.22),
        transparent
    );
    filter: blur(30px);
    transform: rotate(12deg) translateX(-180%);
    animation: heroLightSweep 9s ease-in-out 1.6s infinite;
}

html[dir="rtl"] .hero::after {
    left: auto;
    right: -30%;
    transform: rotate(-12deg) translateX(180%);
    animation-name: heroLightSweepRtl;
}

/* Premium button light sweep */
.hero .button,
.cta-section .button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero .button::before,
.cta-section .button::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -55%;
    width: 34%;
    height: 240%;
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(18deg) translateX(-220%);
    transition: transform 0.75s ease;
}

.hero .button:hover::before,
.cta-section .button:hover::before {
    transform: rotate(18deg) translateX(620%);
}

/* Staggered reveal items */
.stagger-group .stagger-item {
    transition-delay: var(--stagger-delay, 0ms);
}

/* Service card animated underline */
.service-card {
    overflow: hidden;
}

.service-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #1677ff, #38c9ff);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.2, 0.75, 0.25, 1);
}

html[dir="rtl"] .service-card::after {
    transform-origin: right center;
}

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

.service-card .service-icon {
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.25, 1),
                box-shadow 0.45s ease;
}

.service-card:hover .service-icon {
    transform: rotate(45deg) scale(1.08);
    box-shadow: 0 12px 30px rgba(22, 119, 255, 0.15);
}

.service-card > a {
    transition: transform 0.3s ease,
                color 0.3s ease,
                background-color 0.3s ease;
}

.service-card:hover > a {
    color: #ffffff;
    background: #1677ff;
    transform: rotate(45deg);
}

/* Enhanced LinkPro orbit */
.visual-orbit {
    animation: orbitFloat 5s ease-in-out infinite;
}

.visual-orbit::before {
    animation: orbitClockwise 18s linear infinite;
}

.visual-orbit::after {
    animation: orbitCounterClockwise 25s linear infinite;
}

.visual-orbit b {
    position: relative;
    animation: corePulse 3.4s ease-in-out infinite;
}

.visual-orbit b::after {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border: 1px solid rgba(56, 201, 255, 0.18);
    border-radius: 35px;
    animation: coreRingPulse 2.8s ease-out infinite;
}

.visual-orbit > span:nth-child(1) {
    animation: orbitNodePulse 2s ease-in-out infinite;
}

.visual-orbit > span:nth-child(2) {
    animation: orbitNodePulse 2s ease-in-out 0.65s infinite;
}

.visual-orbit > span:nth-child(3) {
    animation: orbitNodePulse 2s ease-in-out 1.3s infinite;
}

/* Process progress line */
.animated-process {
    position: relative;
}

.process-progress-line {
    position: absolute;
    z-index: 0;
    top: -1px;
    right: 0;
    left: 0;
    height: 2px;
    overflow: hidden;
    background: #dce5ef;
}

.process-progress-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #1677ff, #38c9ff);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s cubic-bezier(0.2, 0.75, 0.25, 1);
}

html[dir="rtl"] .process-progress-line span {
    transform-origin: right center;
}

.animated-process.process-active .process-progress-line span {
    transform: scaleX(1);
}

.process-animated-step {
    z-index: 1;
}

.process-animated-step::before {
    transition: transform 0.35s ease,
                background-color 0.35s ease,
                box-shadow 0.35s ease;
}

.animated-process.process-active .process-animated-step::before {
    animation: processDotActivation 0.55s ease both;
    animation-delay: var(--process-delay, 0ms);
}

.animated-process.process-active .process-animated-step:nth-of-type(2) {
    --process-delay: 150ms;
}

.animated-process.process-active .process-animated-step:nth-of-type(3) {
    --process-delay: 400ms;
}

.animated-process.process-active .process-animated-step:nth-of-type(4) {
    --process-delay: 650ms;
}

.animated-process.process-active .process-animated-step:nth-of-type(5) {
    --process-delay: 900ms;
}

/* Navigation refinement */
.site-header {
    transition: height 0.3s ease,
                background-color 0.3s ease,
                box-shadow 0.3s ease,
                backdrop-filter 0.3s ease;
}

.site-header .brand-logo,
.site-header .header-logo {
    transition: height 0.3s ease,
                padding 0.3s ease,
                transform 0.3s ease;
}

.site-header .brand-logo:hover {
    transform: translateY(-2px);
}

/* Keyframes */
@keyframes heroImageEntrance {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

@keyframes heroContentEntrance {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroEyebrowLine {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes networkCanvasIn {
    to { opacity: 0.38; }
}

@keyframes heroLightSweep {
    0%, 25% { transform: rotate(12deg) translateX(-180%); }
    58%, 100% { transform: rotate(12deg) translateX(480%); }
}

@keyframes heroLightSweepRtl {
    0%, 25% { transform: rotate(-12deg) translateX(180%); }
    58%, 100% { transform: rotate(-12deg) translateX(-480%); }
}

@keyframes orbitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-13px); }
}

@keyframes orbitClockwise {
    to { transform: rotate(360deg); }
}

@keyframes orbitCounterClockwise {
    to { transform: rotate(-360deg); }
}

@keyframes corePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 60px rgba(22, 119, 255, 0.4);
    }
    50% {
        transform: scale(1.035);
        box-shadow: 0 0 80px rgba(56, 201, 255, 0.55);
    }
}

@keyframes coreRingPulse {
    0% {
        opacity: 0.6;
        transform: scale(0.88);
    }
    75%, 100% {
        opacity: 0;
        transform: scale(1.23);
    }
}

@keyframes orbitNodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

@keyframes processDotActivation {
    0% {
        transform: scale(0.6);
        background: #a9b8c8;
    }
    65% {
        transform: scale(1.8);
        box-shadow: 0 0 0 8px rgba(22, 119, 255, 0.12);
    }
    100% {
        transform: scale(1);
        background: #1677ff;
        box-shadow: 0 0 0 5px rgba(22, 119, 255, 0.1);
    }
}

/* Tablet and mobile adjustments */
@media (max-width: 980px) {
    .process-progress-line {
        display: none;
    }
}

@media (max-width: 720px) {
    .hero-network {
        opacity: 0.2;
    }

    .hero::after {
        display: none;
    }

    .service-card:hover {
        transform: translateY(-3px);
    }
}

/* Accessibility: disable motion when requested by the user */
@media (prefers-reduced-motion: reduce) {
    .hero-network {
        display: none;
    }

    .hero-media,
    .hero-animate .hero-eyebrow,
    .hero-animate .hero-title,
    .hero-animate .hero-description,
    .hero-animate .hero-buttons,
    .visual-orbit,
    .visual-orbit::before,
    .visual-orbit::after,
    .visual-orbit b,
    .visual-orbit b::after,
    .visual-orbit > span,
    .animated-process .process-progress-line span,
    .animated-process .process-animated-step::before {
        animation: none !important;
        transition: none !important;
    }

    .hero-media {
        transform: none;
    }

    .hero-animate .hero-eyebrow,
    .hero-animate .hero-title,
    .hero-animate .hero-description,
    .hero-animate .hero-buttons {
        opacity: 1;
        transform: none;
    }

    .animated-process .process-progress-line span {
        transform: scaleX(1);
    }
}

/* =========================================================
   LINKPRO PROJECT GALLERY
   ========================================================= */

/* Page background */
.projects-gallery-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(22, 119, 255, 0.08),
            transparent 25%
        ),
        #f3f7fb;
}

/* Gallery heading */
.projects-gallery-heading {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 50px;
}

.projects-gallery-heading h2 {
    margin: 0;
    color: #10243e;
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.055em;
}

html[dir="rtl"] .projects-gallery-heading h2 {
    letter-spacing: 0;
}

.projects-gallery-heading > p {
    margin: 0 0 7px;
    color: #66778d;
    font-size: 0.98rem;
}

/* Main slider container */
.project-slider {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce6f0;
    border-radius: 24px;
    background: #061323;
    box-shadow: 0 25px 70px rgba(6, 19, 35, 0.16);
}

/* Slides wrapper */
.project-slides {
    position: relative;
    width: 100%;
    min-height: 700px;
}

/* Individual slide */
.project-slide {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.45fr);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transform: translateX(45px);

    transition:
        opacity 0.55s ease,
        transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1),
        visibility 0.55s ease;
}

.project-slide.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Previous slide movement */
.project-slide.slide-from-left {
    transform: translateX(-45px);
}

/* =========================================================
   IMAGE DISPLAY
   Handles landscape, portrait and different image sizes
   ========================================================= */

.project-slide-media {
    position: relative;
    min-width: 0;
    min-height: 700px;

    display: grid;
    place-items: center;

    overflow: hidden;
    isolation: isolate;
    background: #07182b;
}

/* Blurred copy behind portrait or narrow images */
.project-image-background {
    position: absolute;
    z-index: 0;
    inset: -35px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(28px);
    opacity: 0.35;
    transform: scale(1.12);
}

/* Dark overlay over blurred background */
.project-slide-media::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(6, 19, 35, 0.14),
            rgba(6, 19, 35, 0)
        ),
        rgba(6, 19, 35, 0.2);

    pointer-events: none;
}

/*
The entire photograph is displayed without cropping.
Portrait photographs appear centered over the blurred background.
*/
.project-main-image {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: 700px;

    object-fit: contain;
    object-position: center;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.75, 0.25, 1),
        opacity 0.5s ease;

    will-change: transform;
}

.project-slide.active .project-main-image {
    animation: projectImageEntrance 0.8s ease both;
}

.project-slider:hover .project-slide.active .project-main-image {
    transform: scale(1.015);
}

/* Bottom image shading */
.project-image-overlay {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 28%;

    pointer-events: none;

    background: linear-gradient(
        to top,
        rgba(4, 16, 31, 0.75),
        transparent
    );
}

/* Image counter */
.project-image-counter {
    position: absolute;
    z-index: 4;
    bottom: 25px;
    left: 27px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.project-image-counter i {
    display: block;
    width: 35px;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
}

/* Full-screen image button */
.project-fullscreen-button {
    position: absolute;
    z-index: 5;
    top: 24px;
    right: 24px;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: rgba(6, 19, 35, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;

    cursor: pointer;
    backdrop-filter: blur(12px);

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.project-fullscreen-button:hover {
    color: #061323;
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
}

.project-fullscreen-button svg {
    display: block;
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   SLIDE INFORMATION
   ========================================================= */

.project-slide-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 50px 40px 110px;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(56, 201, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #07182b,
            #0a294a
        );
}

.project-slide-content::before {
    content: "";
    position: absolute;
    top: 50px;
    right: 40px;

    width: 80px;
    height: 80px;

    border-top: 1px solid rgba(56, 201, 255, 0.2);
    border-right: 1px solid rgba(56, 201, 255, 0.2);
}

html[dir="rtl"] .project-slide-content::before {
    right: auto;
    left: 40px;

    border-right: 0;
    border-left: 1px solid rgba(56, 201, 255, 0.2);
}

.project-slide-number {
    position: absolute;
    top: 42px;
    left: 40px;

    color: #53d4ff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

html[dir="rtl"] .project-slide-number {
    right: 40px;
    left: auto;
}

.project-slide-content small {
    display: block;
    margin-bottom: 14px;

    color: #53d4ff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html[dir="rtl"] .project-slide-content small {
    letter-spacing: 0;
}

.project-slide-content h3 {
    margin: 0 0 18px;

    color: #ffffff;
    font-size: clamp(1.8rem, 2.7vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

html[dir="rtl"] .project-slide-content h3 {
    letter-spacing: 0;
}

.project-slide-content p {
    margin: 0;

    color: #abc0d5;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* =========================================================
   SLIDER CONTROLS
   ========================================================= */

.project-slider-controls {
    position: absolute;
    z-index: 10;
    right: 30px;
    bottom: 28px;

    display: flex;
    align-items: center;
    gap: 14px;
}

html[dir="rtl"] .project-slider-controls {
    right: auto;
    left: 30px;
}

.project-slider-button {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.project-slider-button:hover {
    color: #061323;
    background: #53d4ff;
    border-color: #53d4ff;
    transform: scale(1.08);
}

.project-slider-progress {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #a9bed3;
    font-size: 0.68rem;
    font-weight: 800;
}

.project-progress-track {
    width: 65px;
    height: 2px;

    overflow: hidden;
    background: rgba(255, 255, 255, 0.16);
}

.project-progress-track span {
    display: block;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #1677ff,
        #53d4ff
    );

    transform: scaleX(0.037);
    transform-origin: left center;

    transition: transform 0.5s ease;
}

html[dir="rtl"] .project-progress-track span {
    transform-origin: right center;
}

/* =========================================================
   THUMBNAILS
   ========================================================= */

.project-thumbnails {
    display: flex;
    gap: 13px;

    margin-top: 24px;
    padding: 8px 3px 18px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #9bb0c5 #e4ebf2;
}

.project-thumbnails::-webkit-scrollbar {
    height: 7px;
}

.project-thumbnails::-webkit-scrollbar-track {
    background: #e4ebf2;
    border-radius: 10px;
}

.project-thumbnails::-webkit-scrollbar-thumb {
    background: #9bb0c5;
    border-radius: 10px;
}

/* Individual thumbnail */
.project-thumbnail {
    position: relative;

    width: 132px;
    min-width: 132px;
    height: 84px;

    overflow: hidden;
    padding: 0;

    background: #061323;
    border: 2px solid transparent;
    border-radius: 11px;

    cursor: pointer;
    opacity: 0.58;

    transition:
        opacity 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.project-thumbnail:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

.project-thumbnail.active {
    opacity: 1;
    border-color: #1677ff;
    box-shadow: 0 8px 22px rgba(22, 119, 255, 0.2);
}

.project-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.project-thumbnail > span {
    position: absolute;
    right: 6px;
    bottom: 6px;

    min-width: 25px;
    height: 21px;

    display: grid;
    place-items: center;

    padding: 0 5px;

    color: #ffffff;
    background: rgba(6, 19, 35, 0.76);
    border-radius: 5px;

    font-size: 0.62rem;
    font-weight: 800;
}

/* =========================================================
   FULL-SCREEN LIGHTBOX
   ========================================================= */

.project-lightbox {
    position: fixed;
    z-index: 1000;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 75px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: rgba(2, 10, 20, 0.96);
    backdrop-filter: blur(18px);

    transition:
        visibility 0.35s ease,
        opacity 0.35s ease;
}

.project-lightbox.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.project-lightbox-content {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: scale(0.96);
    transition: transform 0.4s ease;
}

.project-lightbox.open .project-lightbox-content {
    transform: scale(1);
}

.project-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 145px);

    object-fit: contain;

    border-radius: 10px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

.project-lightbox-caption {
    margin-top: 16px;

    color: #d4e1ee;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.project-lightbox-close {
    position: absolute;
    z-index: 3;
    top: 25px;
    right: 30px;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    cursor: pointer;
    font-size: 1.7rem;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.project-lightbox-close:hover {
    color: #061323;
    background: #ffffff;
    transform: rotate(90deg);
}

.project-lightbox-navigation {
    position: absolute;
    z-index: 3;
    top: 50%;

    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    cursor: pointer;
    font-size: 1.2rem;

    transform: translateY(-50%);

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.project-lightbox-navigation:hover {
    color: #061323;
    background: #53d4ff;
}

.project-lightbox-previous {
    left: 28px;
}

.project-lightbox-next {
    right: 28px;
}

/* Stop page scrolling while lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Image entrance animation */
@keyframes projectImageEntrance {
    from {
        opacity: 0.55;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {
    .project-slides {
        min-height: 620px;
    }

    .project-slide {
        grid-template-columns: minmax(0, 1.25fr) minmax(275px, 0.55fr);
    }

    .project-slide-media {
        min-height: 620px;
    }

    .project-main-image {
        height: 620px;
    }

    .project-slide-content {
        padding: 40px 30px 105px;
    }

    .project-slide-number {
        top: 32px;
        left: 30px;
    }

    html[dir="rtl"] .project-slide-number {
        right: 30px;
        left: auto;
    }
}

/* =========================================================
   MOBILE AND SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {
    .projects-gallery-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 35px;
    }

    .project-slider {
        border-radius: 18px;
    }

    .project-slides {
        min-height: auto;
    }

    .project-slide {
        grid-template-columns: 1fr;
    }

    .project-slide-media {
        min-height: 480px;
    }

    .project-main-image {
        height: 480px;
    }

    .project-slide-content {
        min-height: 260px;
        padding: 55px 25px 95px;
    }

    .project-slide-number {
        top: 24px;
        left: 25px;
    }

    html[dir="rtl"] .project-slide-number {
        right: 25px;
        left: auto;
    }

    .project-slide-content::before {
        display: none;
    }

    .project-slider-controls {
        right: 24px;
        bottom: 24px;
    }

    html[dir="rtl"] .project-slider-controls {
        right: auto;
        left: 24px;
    }

    .project-fullscreen-button {
        top: 18px;
        right: 18px;
    }

    .project-lightbox {
        padding: 65px 18px 25px;
    }

    .project-lightbox-navigation {
        top: auto;
        bottom: 20px;
        transform: none;
    }

    .project-lightbox-previous {
        left: calc(50% - 65px);
    }

    .project-lightbox-next {
        right: calc(50% - 65px);
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {
    .projects-gallery-section {
        padding-top: 70px;
    }

    .projects-gallery-heading h2 {
        font-size: 2.6rem;
    }

    .project-slide-media {
        min-height: 390px;
    }

    .project-main-image {
        height: 390px;
    }

    .project-slide-content {
        min-height: 275px;
        padding: 48px 20px 100px;
    }

    .project-slide-content h3 {
        font-size: 1.75rem;
    }

    .project-slider-controls {
        right: 18px;
        bottom: 22px;
        gap: 8px;
    }

    html[dir="rtl"] .project-slider-controls {
        right: auto;
        left: 18px;
    }

    .project-slider-button {
        width: 39px;
        height: 39px;
    }

    .project-progress-track {
        width: 42px;
    }

    .project-thumbnail {
        width: 105px;
        min-width: 105px;
        height: 70px;
    }

    .project-lightbox-content img {
        max-height: calc(100vh - 175px);
    }
}

/* =========================================================
   REDUCED-MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .project-slide,
    .project-main-image,
    .project-thumbnail,
    .project-fullscreen-button,
    .project-lightbox,
    .project-lightbox-content,
    .project-progress-track span {
        animation: none !important;
        transition: none !important;
    }

    .project-thumbnails {
        scroll-behavior: auto;
    }
}

/* =========================================================
   VENDOR TECHNOLOGY PARTNERSHIPS
   ========================================================= */

.partnership-heading {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 90px;
    margin: 115px 0 48px;
    padding-top: 95px;
    border-top: 1px solid var(--line);
}

.partnership-heading h2 {
    max-width: 760px;
}

.partnership-heading > p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 1.03rem;
}

.partnership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.partnership-card {
    --partner-accent: #1677ff;
    position: relative;
    min-width: 0;
    min-height: 345px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 50, 90, 0.1);
    border-radius: 21px;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 14px 42px rgba(14, 48, 84, 0.06);
    transition:
        transform 0.32s ease,
        border-color 0.32s ease,
        box-shadow 0.32s ease;
}

.partnership-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--partner-accent);
    transform: scaleX(0.24);
    transform-origin: left;
    transition: transform 0.35s ease;
}

html[dir="rtl"] .partnership-card::before {
    transform-origin: right;
}

.partnership-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--partner-accent) 34%, transparent);
    box-shadow: 0 24px 58px rgba(9, 45, 83, 0.13);
}

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

.partnership-card--cyan { --partner-accent: #00a6d7; }
.partnership-card--green { --partner-accent: #3dcd58; }
.partnership-card--red { --partner-accent: #cf0a2c; }
.partnership-card--yellow { --partner-accent: #f4c300; }
.partnership-card--blue { --partner-accent: #1769aa; }
.partnership-card--orange { --partner-accent: #f26b32; }

.partnership-logo {
    position: relative;
    min-height: 132px;
    padding: 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(15, 50, 90, 0.08);
    background:
        radial-gradient(circle at 85% 0, color-mix(in srgb, var(--partner-accent) 12%, transparent), transparent 46%),
        linear-gradient(145deg, #f5f8fb, #fff);
}

.partnership-logo::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -45px;
    width: 120px;
    height: 120px;
    border: 1px solid color-mix(in srgb, var(--partner-accent) 22%, transparent);
    border-radius: 50%;
}

html[dir="rtl"] .partnership-logo::after {
    right: auto;
    left: -35px;
}

.partnership-logo img,
.partnership-logo-fallback {
    position: relative;
    z-index: 2;
    grid-area: 1 / 1;
}

.partnership-logo img {
    width: auto;
    max-width: 220px;
    max-height: 76px;
    object-fit: contain;
    background: transparent;
}

.partnership-logo-fallback {
    max-width: 240px;
    color: var(--partner-accent);
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    letter-spacing: -0.035em;
}

.partnership-content {
    padding: 27px 28px 31px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.partnership-content small {
    margin-bottom: 9px;
    color: var(--partner-accent);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html[dir="rtl"] .partnership-content small {
    letter-spacing: 0;
}

.partnership-content strong {
    margin-bottom: 11px;
    font-size: 1.18rem;
    line-height: 1.35;
}

.partnership-content > span {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.7;
}

.partnership-arrow {
    position: absolute;
    right: 21px;
    bottom: 20px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--partner-accent);
    opacity: 0;
    transform: translate(-6px, 6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

html[dir="rtl"] .partnership-arrow {
    right: auto;
    left: 21px;
    transform: translate(6px, 6px);
}

.partnership-card:hover .partnership-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

@media (max-width: 980px) {
    .partnership-heading {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 90px;
        padding-top: 76px;
    }

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

@media (max-width: 620px) {
    .partnership-heading {
        margin-top: 72px;
        padding-top: 60px;
    }

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

    .partnership-card {
        min-height: 315px;
    }

    .partnership-logo {
        min-height: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partnership-card,
    .partnership-card::before,
    .partnership-arrow {
        transition: none !important;
    }
}

/* =========================================================
   VENDORS PAGE
   ========================================================= */

.vendors-hero {
    position: relative;
    min-height: 680px;
    padding: 185px 0 105px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 78% 45%, rgba(22, 119, 255, 0.3), transparent 32%),
        linear-gradient(125deg, #03101f 0%, #071d38 55%, #082d59 100%);
}

html[dir="rtl"] .vendors-hero {
    background:
        radial-gradient(circle at 22% 45%, rgba(22, 119, 255, 0.3), transparent 32%),
        linear-gradient(235deg, #03101f 0%, #071d38 55%, #082d59 100%);
}

.vendors-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background-image:
        linear-gradient(rgba(80, 190, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 190, 255, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 76%, transparent);
}

.vendors-hero-glow {
    position: absolute;
    top: 8%;
    right: 5%;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 201, 255, 0.14), transparent 68%);
    filter: blur(8px);
}

html[dir="rtl"] .vendors-hero-glow {
    right: auto;
    left: 5%;
}

.vendors-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
    align-items: center;
    gap: 90px;
}

.vendors-hero-copy h1 {
    max-width: 820px;
    margin: 0 0 28px;
    font-size: clamp(3.4rem, 6vw, 6.3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.06em;
}

html[dir="rtl"] .vendors-hero-copy h1 {
    letter-spacing: 0;
}

.vendors-hero-copy p {
    max-width: 690px;
    margin: 0;
    color: #b9cce0;
    font-size: 1.08rem;
    line-height: 1.85;
}

.vendors-hero-mark {
    position: relative;
    width: 390px;
    height: 390px;
    margin-inline: auto;
    display: grid;
    place-items: center;
}

.vendors-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(56, 201, 255, 0.28);
}

.vendors-orbit-one {
    inset: 22px;
    animation: vendorOrbitSpin 22s linear infinite;
}

.vendors-orbit-two {
    inset: 67px;
    border-style: dashed;
    opacity: 0.65;
    animation: vendorOrbitSpin 17s linear infinite reverse;
}

.vendors-core {
    position: relative;
    z-index: 2;
    width: 168px;
    height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(105, 210, 255, 0.42);
    border-radius: 42px;
    background: linear-gradient(145deg, #1677ff, #083c80);
    box-shadow: 0 25px 70px rgba(0, 92, 210, 0.42);
    transform: rotate(-4deg);
}

.vendors-core strong {
    font-size: 3.25rem;
    line-height: 1;
}

.vendors-core span {
    margin-top: 10px;
    color: #ccecff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.vendors-hero-mark > i {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #06172b;
    border-radius: 50%;
    background: #38c9ff;
    box-shadow: 0 0 22px rgba(56, 201, 255, 0.9);
}

.vendors-hero-mark > i:nth-of-type(1) { top: 14px; left: 50%; }
.vendors-hero-mark > i:nth-of-type(2) { right: 12px; top: 50%; }
.vendors-hero-mark > i:nth-of-type(3) { bottom: 19px; left: 29%; }
.vendors-hero-mark > i:nth-of-type(4) { left: 19px; top: 36%; }

@keyframes vendorOrbitSpin {
    to { transform: rotate(360deg); }
}

.vendors-section {
    position: relative;
    background:
        radial-gradient(circle at 12% 16%, rgba(22, 119, 255, 0.07), transparent 24%),
        #f6f9fc;
}

.vendors-heading {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 90px;
    margin-bottom: 60px;
}

.vendors-heading h2 {
    max-width: 720px;
}

.vendors-heading > p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 1.03rem;
}

.vendors-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.vendor-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(15, 50, 90, 0.1);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 50px rgba(14, 48, 84, 0.07);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.vendor-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(125deg, transparent 58%, rgba(56, 201, 255, 0.08));
}

.vendor-card:hover {
    z-index: 2;
    transform: translateY(-9px);
    border-color: rgba(22, 119, 255, 0.3);
    box-shadow: 0 28px 70px rgba(9, 45, 83, 0.15);
}

.vendor-card-top {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.vendor-index {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.vendor-icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 13px;
    color: #71dcff;
    background: rgba(2, 17, 33, 0.3);
    backdrop-filter: blur(10px);
}

.vendor-icon svg,
.vendor-assurance-icon svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vendor-logo-panel {
    position: relative;
    z-index: 1;
    height: 230px;
    padding: 62px 55px 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vendor-logo-panel::before {
    content: "";
    position: absolute;
    inset: -80px;
    background: radial-gradient(circle, rgba(56, 201, 255, 0.17), transparent 57%);
    transition: transform 0.55s ease;
}

.vendor-card:hover .vendor-logo-panel::before {
    transform: scale(1.17);
}

.vendor-logo-panel--dark {
    background: linear-gradient(145deg, #03101f, #0a294c);
}

.vendor-logo-panel--light {
    background: linear-gradient(145deg, #eef4fa, #fff);
}

.vendor-logo-panel--light + .vendor-card-content {
    border-top-color: rgba(15, 50, 90, 0.08);
}

.vendor-card--light .vendor-index {
    color: var(--muted);
}

.vendor-card--light .vendor-icon {
    border-color: rgba(15, 50, 90, 0.12);
    color: var(--blue);
    background: rgba(255, 255, 255, 0.76);
}

.vendor-logo-panel img {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: min(100%, 260px);
    max-height: 94px;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.vendor-card:hover .vendor-logo-panel img {
    transform: scale(1.045);
}

.vendor-card-content {
    position: relative;
    z-index: 2;
    padding: 34px 36px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vendor-category {
    display: inline-block;
    margin-bottom: 11px;
    color: var(--blue);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

html[dir="rtl"] .vendor-category {
    letter-spacing: 0;
}

.vendor-card h3 {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 1.65rem;
    line-height: 1.2;
}

.vendor-card p {
    min-height: 78px;
    margin: 0 0 27px;
    color: var(--muted);
    font-size: 0.92rem;
}

.vendor-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 21px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 800;
}

.vendor-link b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    transition: transform 0.25s ease, background 0.25s ease;
}

.vendor-link:hover b {
    transform: translate(3px, -3px);
    background: #0756ca;
}

html[dir="rtl"] .vendor-link:hover b {
    transform: translate(-3px, -3px);
}

.vendor-assurance-section {
    padding: 90px 0;
    color: #fff;
    background: #061323;
}

.vendor-assurance {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) minmax(280px, 0.8fr);
    align-items: center;
    gap: 46px;
}

.vendor-assurance-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(56, 201, 255, 0.3);
    border-radius: 27px;
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(22, 119, 255, 0.2), rgba(56, 201, 255, 0.04));
}

.vendor-assurance-icon svg {
    width: 40px;
    height: 40px;
}

.vendor-assurance h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}

html[dir="rtl"] .vendor-assurance h2 {
    letter-spacing: 0;
}

.vendor-assurance > p {
    margin: 0;
    color: #9fb4ca;
    font-size: 0.97rem;
}

/* Six navigation items require slightly tighter desktop spacing. */
@media (max-width: 1220px) and (min-width: 981px) {
    .nav-wrap { gap: 24px; }
    .main-nav { gap: 19px; }
    .nav-actions { gap: 12px; }
    .button-small { padding-inline: 13px; }
}

@media (max-width: 980px) {
    .vendors-hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .vendors-hero-copy {
        max-width: 760px;
    }

    .vendors-hero-mark {
        width: 320px;
        height: 320px;
    }

    .vendors-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .vendor-assurance {
        grid-template-columns: 92px 1fr;
    }

    .vendor-assurance > p {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
    .vendors-hero {
        min-height: auto;
        padding: 145px 0 78px;
    }

    .vendors-hero-inner {
        gap: 34px;
    }

    .vendors-hero-copy h1 {
        font-size: clamp(3rem, 14vw, 4.3rem);
    }

    .vendors-hero-copy p {
        font-size: 0.98rem;
    }

    .vendors-hero-mark {
        width: 255px;
        height: 255px;
    }

    .vendors-core {
        width: 126px;
        height: 126px;
        border-radius: 32px;
    }

    .vendors-core strong {
        font-size: 2.6rem;
    }

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

    .vendor-logo-panel {
        height: 205px;
        padding-inline: 38px;
    }

    .vendor-card-content {
        padding: 29px 25px 30px;
    }

    .vendor-card p {
        min-height: 0;
    }

    .vendor-assurance-section {
        padding: 72px 0;
    }

    .vendor-assurance {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .vendor-assurance > p {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vendors-orbit,
    .vendor-card,
    .vendor-logo-panel::before,
    .vendor-logo-panel img,
    .vendor-link b {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   CUSTOMERS AND INDUSTRIES
   ========================================================= */

.customers-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #061323;
}

.customers-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 12%, rgba(22, 119, 255, 0.23), transparent 29%),
        radial-gradient(circle at 92% 88%, rgba(56, 201, 255, 0.12), transparent 25%),
        linear-gradient(rgba(70, 175, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70, 175, 255, 0.045) 1px, transparent 1px);
    background-size: auto, auto, 76px 76px, 76px 76px;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

html[dir="rtl"] .customers-background {
    transform: scaleX(-1);
}

.customers-container {
    position: relative;
    z-index: 2;
}

.customers-heading {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 90px;
    margin-bottom: 58px;
}

.customers-heading h2 {
    max-width: 780px;
    color: #fff;
}

.customers-heading > p {
    margin: 0 0 8px;
    color: #9fb4ca;
    font-size: 1.03rem;
}

.customers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.customer-card {
    --customer-accent: #38c9ff;
    position: relative;
    min-width: 0;
    min-height: 315px;
    overflow: hidden;
    padding: 30px 30px 27px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.customer-card:nth-child(3n + 2) {
    --customer-accent: #1677ff;
}

.customer-card:nth-child(3n + 3) {
    --customer-accent: #32e4a3;
}

.customer-card::before {
    content: "";
    position: absolute;
    top: -75px;
    right: -75px;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--customer-accent) 18%, transparent), transparent 69%);
    transition: transform 0.45s ease;
}

html[dir="rtl"] .customer-card::before {
    right: auto;
    left: -75px;
}

.customer-card:hover {
    z-index: 2;
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--customer-accent) 48%, transparent);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.22);
}

.customer-card:hover::before {
    transform: scale(1.25);
}

.customer-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}

.customer-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--customer-accent) 45%, transparent);
    border-radius: 18px;
    color: var(--customer-accent);
    background: color-mix(in srgb, var(--customer-accent) 10%, transparent);
    box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.025);
    transition: transform 0.3s ease, background 0.3s ease;
}

.customer-card:hover .customer-icon {
    transform: translateY(-3px) rotate(-3deg);
    background: color-mix(in srgb, var(--customer-accent) 16%, transparent);
}

html[dir="rtl"] .customer-card:hover .customer-icon {
    transform: translateY(-3px) rotate(3deg);
}

.customer-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.customer-number {
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.customer-card-copy {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 42px;
}

.customer-card-copy small {
    display: block;
    margin-bottom: 8px;
    color: var(--customer-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

html[dir="rtl"] .customer-card-copy small {
    letter-spacing: 0;
}

.customer-card-copy h3 {
    margin: 0 0 9px;
    color: #fff;
    font-size: 1.26rem;
    line-height: 1.3;
}

.customer-card-copy p {
    margin: 0;
    color: #92a8bd;
    font-size: 0.84rem;
    line-height: 1.7;
}

.customer-card-line {
    position: absolute;
    right: 30px;
    bottom: 0;
    left: 30px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--customer-accent);
    transform: scaleX(0);
    transition: transform 0.35s ease;
}

.customer-card:hover .customer-card-line {
    transform: scaleX(1);
}

.customers-footer {
    margin-top: 46px;
    padding: 23px 0 0;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.customers-footer > span {
    width: 38px;
    height: 1px;
    background: var(--cyan);
}

.customers-footer p {
    margin: 0;
    color: #8fa6bc;
    font-size: 0.87rem;
}

.customers-footer a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 800;
}

.customers-footer a b {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #061323;
    background: var(--cyan);
    transition: transform 0.25s ease;
}

.customers-footer a:hover b {
    transform: translate(3px, -3px);
}

html[dir="rtl"] .customers-footer a:hover b {
    transform: translate(-3px, -3px);
}

@media (max-width: 980px) {
    .customers-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

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

    .customer-card {
        min-height: 285px;
        padding: 26px 24px 24px;
    }

    .customer-card-copy {
        padding-top: 34px;
    }

    .customers-footer {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .customers-footer > span {
        display: none;
    }

    .customers-footer a {
        margin-top: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-card,
    .customer-card::before,
    .customer-icon,
    .customer-card-line,
    .customers-footer a b {
        transition: none !important;
    }
}