/* =========================================================
   ZENTRIX SOLUTIONS
   PREMIUM BLACK + GOLD THEME
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --black: #050505;
    --black-soft: #0a0a0a;
    --black-card: #0e0e0e;

    --gold: #d4af37;
    --gold-light: #f4d06f;
    --gold-dark: #9e7c16;

    --silver: #c7c7c7;
    --white: #f5f5f5;

    --text: #eeeeee;
    --muted: #969696;

    --border: rgba(212, 175, 55, 0.18);

    --gold-glow:
        0 0 20px rgba(212, 175, 55, 0.20);

    --gold-glow-strong:
        0 0 35px rgba(212, 175, 55, 0.35);

    --transition: all 0.35s ease;

    --container: 1180px;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Inter", sans-serif;

    background: var(--black);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

}


body.menu-open {

    overflow: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin: auto;

}


/* =========================================================
   PRELOADER
========================================================= */

.preloader {

    position: fixed;

    inset: 0;

    background: #030303;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    z-index: 9999;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;

}


.preloader.hide {

    opacity: 0;

    visibility: hidden;

}


.loader-logo {

    width: 75px;

    height: 75px;

    border: 2px solid var(--gold);

    display: grid;

    place-items: center;

    color: var(--gold);

    font-family: "Space Grotesk";

    font-size: 40px;

    font-weight: 700;

    transform: rotate(45deg);

    box-shadow: var(--gold-glow-strong);

    animation: loaderRotate 2s infinite ease-in-out;

}


.loader-logo::first-letter {

    transform: rotate(-45deg);

}


.loader-line {

    width: 160px;

    height: 2px;

    background: #222;

    margin-top: 35px;

    overflow: hidden;

    position: relative;

}


.loader-line::after {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    background: var(--gold);

    animation: loaderLine 1.5s infinite;

}


.preloader p {

    margin-top: 18px;

    color: #777;

    font-size: 9px;

    letter-spacing: 4px;

}


/* =========================================================
   HEADER
========================================================= */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 80px;

    z-index: 1000;

    border-bottom: 1px solid transparent;

    transition: var(--transition);

}


.header.scrolled {

    background: rgba(5, 5, 5, 0.90);

    backdrop-filter: blur(18px);

    border-color: var(--border);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);

}


.nav-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    gap: 11px;

}


.logo-symbol {

    width: 40px;

    height: 40px;

    border: 2px solid var(--gold);

    border-radius: 9px;

    display: grid;

    place-items: center;

    color: var(--gold);

    font-family: "Space Grotesk";

    font-size: 22px;

    font-weight: 700;

    transform: rotate(45deg);

    box-shadow: var(--gold-glow);

    transition: var(--transition);

}


.logo:hover .logo-symbol {

    transform: rotate(135deg);

    box-shadow: var(--gold-glow-strong);

}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-text strong {

    font-family: "Space Grotesk";

    font-size: 15px;

    letter-spacing: 2px;

}


.logo-text span {

    color: var(--gold);

    font-size: 7px;

    letter-spacing: 3px;

    margin-top: 5px;

}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-link {

    position: relative;

    color: #aaa;

    font-size: 12px;

    font-weight: 500;

    transition: var(--transition);

}


.nav-link:hover,
.nav-link.active {

    color: var(--gold);

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 1px;

    background: var(--gold);

    transition: var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.nav-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 18px;

    background: var(--gold);

    color: #080808;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

    transition: var(--transition);

}


.nav-button:hover {

    background: var(--gold-light);

    transform: translateY(-3px);

    box-shadow: var(--gold-glow-strong);

}


.nav-button i {

    font-size: 10px;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.menu-toggle {

    display: none;

    width: 40px;

    height: 40px;

    border: 1px solid var(--border);

    background: transparent;

    border-radius: 7px;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 20px;

    height: 2px;

    background: var(--gold);

    margin: 4px auto;

    transition: var(--transition);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    padding-top: 110px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 45%,
            rgba(212,175,55,0.09),
            transparent 30%
        ),

        #050505;

}


.hero-background {

    position: absolute;

    width: 650px;

    height: 650px;

    right: -250px;

    top: 50%;

    transform: translateY(-50%);

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,0.10),
            transparent 65%
        );

    filter: blur(15px);

}


.hero-grid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(212,175,55,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,0.025) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

}


.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;

}


.hero-content {

    max-width: 650px;

}


/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 13px;

    border: 1px solid var(--border);

    border-radius: 50px;

    background: rgba(212,175,55,0.03);

    color: var(--gold);

    font-size: 9px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 22px;

}


.badge-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--gold);

    box-shadow:
        0 0 12px var(--gold);

    animation: pulse 1.8s infinite;

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero h1 {

    font-family: "Space Grotesk";

    font-size: clamp(
        44px,
        5.5vw,
        72px
    );

    line-height: 1.04;

    letter-spacing: -3px;

    max-width: 720px;

}


.hero h1 span {

    color: var(--gold);

    text-shadow:
        0 0 25px rgba(212,175,55,0.25);

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    color: var(--muted);

    max-width: 570px;

    font-size: 14px;

    margin: 24px 0 30px;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 13px 21px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: 700;

    transition: var(--transition);

}


.btn-gold {

    background: var(--gold);

    color: #090909;

    box-shadow:
        0 0 20px rgba(212,175,55,0.15);

}


.btn-gold:hover {

    background: var(--gold-light);

    transform: translateY(-4px);

    box-shadow:
        0 12px 35px rgba(212,175,55,0.25);

}


.btn-outline {

    border: 1px solid rgba(255,255,255,0.14);

    background: rgba(255,255,255,0.02);

    color: var(--white);

}


.btn-outline:hover {

    border-color: var(--gold);

    color: var(--gold);

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(212,175,55,0.08);

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

}


/* =========================================================
   HERO FEATURES
========================================================= */

.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 48px;

}


.hero-feature {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #888;

    font-size: 9px;

    line-height: 1.3;

}


.hero-feature i {

    color: var(--gold);

    font-size: 15px;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position: relative;

    height: 520px;

    display: grid;

    place-items: center;

}


.hero-logo {

    width: 210px;

    height: 210px;

    border: 3px solid var(--gold);

    border-radius: 32%;

    display: grid;

    place-items: center;

    transform: rotate(45deg);

    box-shadow:

        0 0 40px rgba(212,175,55,0.25),

        inset 0 0 35px rgba(212,175,55,0.05);

    animation:
        heroFloat 4s ease-in-out infinite;

}


.hero-logo span {

    font-family: "Space Grotesk";

    font-size: 120px;

    font-weight: 700;

    color: var(--gold);

    transform: rotate(-45deg);

    text-shadow:
        0 0 30px rgba(212,175,55,0.5);

}


/* =========================================================
   HERO CIRCLES
========================================================= */

.hero-circle {

    position: absolute;

    border: 1px solid rgba(212,175,55,0.18);

    border-radius: 50%;

}


.circle-one {

    width: 500px;

    height: 220px;

    transform: rotate(-20deg);

    animation: orbitOne 14s linear infinite;

}


.circle-two {

    width: 420px;

    height: 180px;

    transform: rotate(30deg);

    animation: orbitTwo 11s linear infinite;

}


.circle-three {

    width: 350px;

    height: 150px;

    border-color: rgba(255,255,255,0.07);

    transform: rotate(70deg);

}


/* =========================================================
   FLOATING CODE
========================================================= */

.floating-code {

    position: absolute;

    color: var(--gold);

    font-family: monospace;

    font-size: 12px;

    opacity: 0.7;

    animation:
        codeFloat 3s ease-in-out infinite;

}


.code-one {

    top: 25%;

    left: 12%;

}


.code-two {

    top: 20%;

    right: 13%;

    animation-delay: .6s;

}


.code-three {

    bottom: 27%;

    right: 17%;

    animation-delay: 1s;

}


.code-four {

    bottom: 22%;

    left: 18%;

    animation-delay: 1.5s;

}


/* =========================================================
   SCROLL
========================================================= */

.scroll-down {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    color: #666;

    font-size: 8px;

}


.scroll-down span {

    width: 16px;

    height: 27px;

    border: 1px solid #555;

    border-radius: 12px;

    position: relative;

}


.scroll-down span::after {

    content: "";

    position: absolute;

    width: 3px;

    height: 6px;

    background: var(--gold);

    border-radius: 4px;

    top: 5px;

    left: 6px;

    animation: scrollMove 1.5s infinite;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

    position: relative;

    padding: 110px 0;

}


.services-section {

    background: #070707;

}


.about-section {

    background:

        linear-gradient(
            180deg,
            #050505,
            #090909,
            #050505
        );

}


.projects-section {

    background: #060606;

}


.team-section {

    background: #050505;

}


.why-section {

    background: #080808;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 55px;

}


.section-label {

    color: var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-heading h2,
.about-content h2,
.contact-content h2 {

    font-family: "Space Grotesk";

    font-size: clamp(
        32px,
        4vw,
        48px
    );

    line-height: 1.1;

    letter-spacing: -1.5px;

    margin: 9px 0 13px;

}


.section-heading h2 span,
.about-content h2 span,
.contact-content h2 span {

    color: var(--gold);

}


.section-heading p {

    max-width: 560px;

    margin: auto;

    color: var(--muted);

    font-size: 12px;

}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.service-card {

    position: relative;

    padding: 28px 24px;

    min-height: 310px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #111,
            #080808
        );

    overflow: hidden;

    transition: var(--transition);

}


.service-card::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -90px;

    left: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,0.13),
            transparent 70%
        );

}


.service-card:hover {

    transform: translateY(-9px);

    border-color:
        rgba(212,175,55,0.5);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.35);

}


.service-number {

    position: absolute;

    top: 18px;

    right: 18px;

    color: #444;

    font-family: monospace;

    font-size: 10px;

}


.service-icon {

    color: var(--gold);

    font-size: 35px;

    margin-bottom: 50px;

    text-shadow:
        0 0 20px rgba(212,175,55,0.3);

}


.service-card h3 {

    font-family: "Space Grotesk";

    font-size: 18px;

    margin-bottom: 9px;

}


.service-card p {

    color: var(--muted);

    font-size: 11px;

    min-height: 65px;

}


.service-card a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--gold-light);

    font-size: 10px;

    font-weight: 700;

    margin-top: 20px;

}


.service-card a i {

    transition: var(--transition);

}


.service-card a:hover i {

    transform: translateX(5px);

}


/* =========================================================
   ABOUT
========================================================= */

.about-container {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

    align-items: center;

}


.about-content h2 {

    text-align: left;

}


.about-content p {

    color: var(--muted);

    font-size: 13px;

    max-width: 550px;

    margin-bottom: 15px;

}


.about-content .btn {

    margin-top: 15px;

}


.stats-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;

}


.stat-card {

    min-height: 150px;

    padding: 27px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    background: #0b0b0b;

    display: flex;

    flex-direction: column;

    justify-content: center;

    transition: var(--transition);

}


.stat-card:hover {

    border-color: var(--border);

    transform: translateY(-5px);

    box-shadow: var(--gold-glow);

}


.stat-card i {

    color: var(--gold);

    font-size: 16px;

    margin-bottom: 10px;

}


.stat-card strong {

    color: var(--gold);

    font-family: "Space Grotesk";

    font-size: 38px;

}


.stat-card span {

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   PROJECTS
========================================================= */

.projects-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.project-card {

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 15px;

    background: #0b0b0b;

    transition: var(--transition);

}


.project-card:hover {

    transform: translateY(-8px);

    border-color: var(--border);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.3);

}


.project-image {

    height: 260px;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,0.15),
            #080808 65%
        );

}


.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.project-placeholder {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: var(--gold);

    font-size: 60px;

}


.project-info {

    padding: 22px;

}


.project-info span {

    color: var(--gold);

    font-size: 8px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}


.project-info h3 {

    font-family: "Space Grotesk";

    font-size: 19px;

    margin: 5px 0;

}


.project-info p {

    color: var(--muted);

    font-size: 11px;

}


.project-info a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--gold-light);

    font-size: 10px;

    font-weight: 700;

    margin-top: 17px;

}


.project-info a i {

    transition: var(--transition);

}


.project-info a:hover i {

    transform: translateX(5px);

}


.projects-button {

    text-align: center;

    margin-top: 40px;

}


/* =========================================================
   WHY
========================================================= */

.why-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 30px;

}


.why-card {

    padding: 10px;

    transition: var(--transition);

}


.why-card:hover {

    transform: translateY(-6px);

}


.why-icon {

    width: 52px;

    height: 52px;

    border: 1px solid var(--gold);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--gold);

    margin-bottom: 18px;

    box-shadow: var(--gold-glow);

}


.why-card h3 {

    font-family: "Space Grotesk";

    font-size: 16px;

    margin-bottom: 7px;

}


.why-card p {

    color: var(--muted);

    font-size: 11px;

}


/* =========================================================
   TEAM
========================================================= */

.team-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;

}


.team-card {

    text-align: center;

    padding: 30px 18px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 15px;

    background: #0b0b0b;

    transition: var(--transition);

}


.team-card:hover {

    transform: translateY(-8px);

    border-color: var(--border);

    box-shadow: var(--gold-glow);

}


.team-image {

    width: 115px;

    height: 115px;

    margin: auto auto 20px;

    border-radius: 50%;

    border: 2px solid var(--gold);

    overflow: hidden;

    background: #111;

    position: relative;

}


.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.team-placeholder {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: var(--gold);

    font-family: "Space Grotesk";

    font-size: 42px;

    font-weight: 700;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,0.12),
            #080808
        );

}


.team-card h3 {

    font-family: "Space Grotesk";

    font-size: 15px;

}


.team-card p {

    color: var(--muted);

    font-size: 10px;

    margin-top: 4px;

}


.team-socials {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

}


.team-socials a {

    width: 29px;

    height: 29px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    color: #888;

    font-size: 10px;

    transition: var(--transition);

}


.team-socials a:hover {

    color: var(--gold);

    border-color: var(--gold);

    transform: translateY(-3px);

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    padding-top: 80px;

}


.contact-box {

    min-height: 370px;

    padding: 60px;

    border: 1px solid var(--border);

    border-radius: 20px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 50%,
            rgba(212,175,55,0.12),
            transparent 30%
        ),

        #0a0a0a;

}


.contact-content h2 {

    text-align: left;

}


.contact-content p {

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 25px;

}


.contact-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.contact-visual {

    display: grid;

    place-items: center;

}


.contact-orb {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    border: 2px solid var(--gold);

    display: grid;

    place-items: center;

    box-shadow:

        0 0 50px rgba(212,175,55,0.2),

        inset 0 0 30px rgba(212,175,55,0.08);

    animation:
        contactFloat 4s ease-in-out infinite;

}


.contact-orb span {

    font-family: "Space Grotesk";

    color: var(--gold);

    font-size: 90px;

    font-weight: 700;

    text-shadow:
        0 0 25px rgba(212,175,55,0.5);

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    padding-top: 65px;

    background: #030303;

    border-top:
        1px solid rgba(255,255,255,0.07);

}


.footer-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap: 45px;

    padding-bottom: 55px;

}


.footer-brand p {

    max-width: 280px;

    color: #707070;

    font-size: 10px;

    margin-top: 18px;

}


.footer-socials {

    display: flex;

    gap: 8px;

    margin-top: 18px;

}


.footer-socials a {

    width: 31px;

    height: 31px;

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #888;

    font-size: 10px;

    transition: var(--transition);

}


.footer-socials a:hover {

    color: var(--gold);

    border-color: var(--gold);

}


.footer-column h4 {

    font-family: "Space Grotesk";

    font-size: 12px;

    margin-bottom: 17px;

}


.footer-column a {

    display: block;

    color: #777;

    font-size: 10px;

    margin: 9px 0;

    transition: var(--transition);

}


.footer-column a:hover {

    color: var(--gold);

    transform: translateX(3px);

}


.footer-column a i {

    width: 17px;

    color: var(--gold);

}


.footer-bottom {

    border-top:
        1px solid rgba(255,255,255,0.06);

    padding: 20px 0;

}


.footer-bottom .container {

    display: flex;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p {

    color: #555;

    font-size: 9px;

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 57px;

    height: 57px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: #20d463;

    color: white;

    font-size: 27px;

    z-index: 900;

    box-shadow:
        0 8px 30px rgba(32,211,99,0.25);

    animation:
        whatsappPulse 2.4s infinite;

}


.floating-whatsapp:hover {

    transform: scale(1.08);

}


.whatsapp-notification {

    position: absolute;

    top: -2px;

    right: -2px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ff3c3c;

    color: white;

    border: 2px solid var(--black);

    display: grid;

    place-items: center;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {

    position: fixed;

    right: 27px;

    bottom: 95px;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: 1px solid var(--border);

    background: #0b0b0b;

    color: var(--gold);

    display: grid;

    place-items: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: var(--transition);

    z-index: 800;

}


.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.back-to-top:hover {

    background: var(--gold);

    color: #050505;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pulse {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(.55);

        opacity: .4;

    }

}


@keyframes heroFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(45deg);

    }

    50% {

        transform:
            translateY(-15px)
            rotate(45deg);

    }

}


@keyframes orbitOne {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes orbitTwo {

    from {

        transform:
            rotate(30deg);

    }

    to {

        transform:
            rotate(-330deg);

    }

}


@keyframes codeFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-15px);

    }

}


@keyframes scrollMove {

    0% {

        top: 5px;

        opacity: 1;

    }

    70% {

        top: 14px;

        opacity: .2;

    }

    100% {

        top: 5px;

        opacity: 1;

    }

}


@keyframes loaderRotate {

    0%,
    100% {

        transform:
            rotate(45deg)
            scale(1);

    }

    50% {

        transform:
            rotate(225deg)
            scale(1.05);

    }

}


@keyframes loaderLine {

    0% {

        left: -100%;

    }

    100% {

        left: 100%;

    }

}


@keyframes whatsappPulse {

    0%,
    100% {

        box-shadow:
            0 8px 30px rgba(32,211,99,0.25);

    }

    50% {

        box-shadow:
            0 8px 40px rgba(32,211,99,0.5);

    }

}


@keyframes contactFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


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

@media (max-width: 1050px) {


    .navbar {

        gap: 18px;

    }


    .services-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .why-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .team-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 800px) {


    .container {

        width:
            min(
                calc(100% - 32px),
                var(--container)
            );

    }


    .navbar {

        position: fixed;

        top: 80px;

        left: 16px;

        right: 16px;

        padding: 25px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 22px;

        background:
            rgba(7,7,7,.97);

        backdrop-filter: blur(20px);

        border: 1px solid var(--border);

        border-radius: 15px;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-15px);

        transition: var(--transition);

    }


    .navbar.open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .nav-button {

        display: none;

    }


    .menu-toggle {

        display: block;

    }


    .menu-toggle.active span:nth-child(1) {

        transform:
            translateY(6px)
            rotate(45deg);

    }


    .menu-toggle.active span:nth-child(2) {

        opacity: 0;

    }


    .menu-toggle.active span:nth-child(3) {

        transform:
            translateY(-6px)
            rotate(-45deg);

    }


    .hero {

        padding-top: 130px;

    }


    .hero-container {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .hero-visual {

        order: -1;

        height: 350px;

    }


    .hero-content {

        margin: auto;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-features {

        justify-content: center;

    }


    .hero-logo {

        width: 160px;

        height: 160px;

    }


    .hero-logo span {

        font-size: 90px;

    }


    .circle-one {

        width: 370px;

        height: 160px;

    }


    .circle-two {

        width: 310px;

        height: 135px;

    }


    .about-container {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .about-content {

        text-align: center;

    }


    .about-content h2 {

        text-align: center;

    }


    .about-content p {

        margin-left: auto;

        margin-right: auto;

    }


    .contact-box {

        grid-template-columns:
            1fr;

        padding: 45px 30px;

    }


    .contact-content {

        text-align: center;

    }


    .contact-content h2 {

        text-align: center;

    }


    .contact-buttons {

        justify-content: center;

    }


    .contact-visual {

        display: none;

    }


    .footer-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


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

@media (max-width: 560px) {


    .section {

        padding: 80px 0;

    }


    .hero h1 {

        font-size: 42px;

        letter-spacing: -2px;

    }


    .hero-description {

        font-size: 12px;

    }


    .hero-features {

        gap: 16px;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .projects-grid {

        grid-template-columns:
            1fr;

    }


    .why-grid {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .team-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap: 30px;

    }


    .footer-bottom .container {

        flex-direction: column;

        text-align: center;

    }


    .floating-whatsapp {

        right: 17px;

        bottom: 17px;

    }


    .back-to-top {

        right: 18px;

        bottom: 85px;

    }


    .scroll-down {

        display: none;

    }


}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }


}

/* Center Footer */
.footer-content {
    display: flex;
    justify-content: center;
    text-align: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.footer-brand .logo {
    justify-content: center;
}

.footer-brand p {
    text-align: center;
    max-width: 500px;
    margin: 15px auto;
}

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-section {
position: relative;
overflow: hidden;
background: var(--black-soft);
}

.process-section::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
top: 10%;
left: -220px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.06);
filter: blur(90px);
pointer-events: none;
}

.process-section::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
bottom: -180px;
right: -150px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.05);
filter: blur(90px);
pointer-events: none;
}

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

.process-section .section-heading {
max-width: 720px;
margin: 0 auto 65px;
text-align: center;
}

.process-section .section-heading h2 {
margin-bottom: 18px;
}

.process-section .section-heading h2 span {
color: var(--gold);
}

.process-section .section-heading p {
max-width: 650px;
margin: 0 auto;
color: var(--muted);
line-height: 1.8;
}

.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}

.process-grid::before {
content: "";
position: absolute;
top: 50px;
left: 11%;
right: 11%;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(212, 175, 55, 0.35),
rgba(212, 175, 55, 0.35),
transparent
);
z-index: 0;
}

.process-card {
position: relative;
padding: 38px 28px 32px;
min-height: 310px;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.015)
);
border: 1px solid var(--border-light);
border-radius: 18px;
text-align: center;
overflow: hidden;
transition: var(--transition);
z-index: 1;
}

.process-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
145deg,
rgba(212, 175, 55, 0.09),
transparent 45%
);
opacity: 0;
transition: var(--transition);
}

.process-card::after {
content: "";
position: absolute;
top: 0;
left: 25px;
right: 25px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
transform: scaleX(0);
transition: transform 0.4s ease;
}

.process-card:hover {
transform: translateY(-10px);
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.45),
0 0 30px rgba(212, 175, 55, 0.08);
}

.process-card:hover::before {
opacity: 1;
}

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

.process-number {
position: absolute;
top: 15px;
right: 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(212, 175, 55, 0.5);
}

.process-icon {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 50%;
background: rgba(212, 175, 55, 0.07);
color: var(--gold);
font-size: 25px;
box-shadow: 0 0 25px rgba(212, 175, 55, 0.08);
transition: var(--transition);
z-index: 2;
}

.process-card:hover .process-icon {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
transform: scale(1.08) rotate(5deg);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}

.process-card h3 {
position: relative;
margin-bottom: 14px;
color: var(--white);
font-size: 21px;
font-weight: 700;
z-index: 2;
}

.process-card p {
position: relative;
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.8;
z-index: 2;
}

.process-card.reveal {
opacity: 0;
transform: translateY(35px);
transition:
opacity 0.7s ease,
transform 0.7s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

.process-card.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.process-card.reveal.visible:hover {
transform: translateY(-10px);
}

@media (max-width: 1050px) {
.process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}


.process-grid::before {
    display: none;
}

.process-card {
    min-height: 290px;
}


}

@media (max-width: 560px) {
.process-section .section-heading {
margin-bottom: 45px;
}


.process-grid {
    grid-template-columns: 1fr;
    gap: 18px;
}

.process-card {
    min-height: auto;
    padding: 35px 24px 30px;
}

.process-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 20px;
    font-size: 22px;
}

.process-card h3 {
    font-size: 19px;
}

.process-card p {
    font-size: 13px;
}


}

@media (prefers-reduced-motion: reduce) {
.process-card,
.process-icon,
.process-card::before,
.process-card::after {
transition: none;
}


.process-card.reveal {
    opacity: 1;
    transform: none;
}


}


.why-section {
position: relative;
overflow: hidden;
background: var(--black);
}

.why-section::before {
content: "";
position: absolute;
width: 480px;
height: 480px;
top: 15%;
right: -250px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.055);
filter: blur(100px);
pointer-events: none;
}

.why-section::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
bottom: -180px;
left: -130px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.04);
filter: blur(90px);
pointer-events: none;
}

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

.why-section .section-heading {
max-width: 750px;
margin: 0 auto 60px;
text-align: center;
}

.why-section .section-heading h2 {
margin-bottom: 18px;
}

.why-section .section-heading h2 span {
color: var(--gold);
}

.why-section .section-heading p {
max-width: 650px;
margin: 0 auto;
color: var(--muted);
line-height: 1.8;
}

.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}

.why-card {
position: relative;
padding: 36px 28px;
min-height: 280px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.012)
);
border: 1px solid var(--border-light);
border-radius: 18px;
overflow: hidden;
transition: var(--transition);
}

.why-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
transform: scaleX(0);
transition: transform 0.45s ease;
}

.why-card::after {
content: "";
position: absolute;
width: 130px;
height: 130px;
top: -65px;
right: -65px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.08);
filter: blur(25px);
opacity: 0;
transition: var(--transition);
}

.why-card:hover {
transform: translateY(-9px);
border-color: rgba(212, 175, 55, 0.4);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.45),
0 0 30px rgba(212, 175, 55, 0.07);
}

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

.why-card:hover::after {
opacity: 1;
}

.why-icon {
position: relative;
width: 62px;
height: 62px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 15px;
background: rgba(212, 175, 55, 0.07);
color: var(--gold);
font-size: 23px;
transition: var(--transition);
z-index: 2;
}

.why-card:hover .why-icon {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
transform: translateY(-3px) rotate(-4deg);
box-shadow: 0 0 25px rgba(212, 175, 55, 0.2);
}

.why-card h3 {
position: relative;
margin: 0 0 13px;
color: var(--white);
font-size: 19px;
font-weight: 700;
z-index: 2;
}

.why-card p {
position: relative;
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.8;
z-index: 2;
}

.why-card.reveal {
opacity: 0;
transform: translateY(35px);
transition:
opacity 0.7s ease,
transform 0.7s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

.why-card.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.why-card.reveal.visible:hover {
transform: translateY(-9px);
}

.why-grid .why-card:nth-child(2) {
transition-delay: 0.08s;
}

.why-grid .why-card:nth-child(3) {
transition-delay: 0.16s;
}

.why-grid .why-card:nth-child(4) {
transition-delay: 0.24s;
}

@media (max-width: 1050px) {
.why-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}


.why-card {
    min-height: 250px;
}


}

@media (max-width: 560px) {
.why-section .section-heading {
margin-bottom: 42px;
}


.why-grid {
    grid-template-columns: 1fr;
    gap: 17px;
}

.why-card {
    min-height: auto;
    padding: 30px 24px;
}

.why-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 21px;
    font-size: 21px;
}

.why-card h3 {
    font-size: 18px;
}

.why-card p {
    font-size: 13px;
}


}

@media (prefers-reduced-motion: reduce) {
.why-card,
.why-icon,
.why-card::before,
.why-card::after {
transition: none;
}

.why-card.reveal {
    opacity: 1;
    transform: none;
}

}
.services-section {
position: relative;
overflow: hidden;
background: var(--black-soft);
}

.services-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: 5%;
left: -280px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.05);
filter: blur(100px);
pointer-events: none;
}

.services-section::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
right: -220px;
bottom: -180px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.045);
filter: blur(100px);
pointer-events: none;
}

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

.services-section .section-heading {
max-width: 720px;
margin: 0 auto 65px;
text-align: center;
}

.services-section .section-heading h2 {
margin-bottom: 18px;
}

.services-section .section-heading h2 span {
color: var(--gold);
}

.services-section .section-heading p {
max-width: 650px;
margin: 0 auto;
color: var(--muted);
line-height: 1.8;
}

.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}

.service-card {
position: relative;
min-height: 350px;
padding: 35px 28px;
display: flex;
flex-direction: column;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.045),
rgba(255, 255, 255, 0.012)
);
border: 1px solid var(--border-light);
border-radius: 18px;
overflow: hidden;
transition: var(--transition);
}

.service-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
145deg,
rgba(212, 175, 55, 0.09),
transparent 50%
);
opacity: 0;
transition: var(--transition);
pointer-events: none;
}

.service-card::after {
content: "";
position: absolute;
top: 0;
left: 25px;
right: 25px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.45s ease;
}

.service-card:hover {
transform: translateY(-10px);
border-color: rgba(212, 175, 55, 0.42);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.45),
0 0 30px rgba(212, 175, 55, 0.07);
}

.service-card:hover::before {
opacity: 1;
}

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

.service-icon {
position: relative;
width: 68px;
height: 68px;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(212, 175, 55, 0.32);
border-radius: 16px;
background: rgba(212, 175, 55, 0.07);
color: var(--gold);
font-size: 25px;
transition: var(--transition);
z-index: 2;
}

.service-card:hover .service-icon {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
transform: translateY(-4px) rotate(-4deg);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.22);
}

.service-card h3 {
position: relative;
margin: 0 0 14px;
color: var(--white);
font-size: 21px;
font-weight: 700;
z-index: 2;
}

.service-card p {
position: relative;
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.8;
z-index: 2;
}

.service-card .service-link {
position: relative;
margin-top: auto;
padding-top: 25px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gold);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
z-index: 2;
}

.service-card .service-link i {
font-size: 11px;
transition: transform 0.3s ease;
}

.service-card:hover .service-link {
color: var(--gold-light);
}

.service-card:hover .service-link i {
transform: translateX(5px);
}

.service-card.reveal {
opacity: 0;
transform: translateY(35px);
transition:
opacity 0.7s ease,
transform 0.7s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}

.service-card.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.service-card.reveal.visible:hover {
transform: translateY(-10px);
}

.services-grid .service-card:nth-child(2) {
transition-delay: 0.08s;
}

.services-grid .service-card:nth-child(3) {
transition-delay: 0.16s;
}

.services-grid .service-card:nth-child(4) {
transition-delay: 0.24s;
}

@media (max-width: 1050px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}


.service-card {
    min-height: 320px;
}


}

@media (max-width: 560px) {
.services-section .section-heading {
margin-bottom: 45px;
}


.services-grid {
    grid-template-columns: 1fr;
    gap: 17px;
}

.service-card {
    min-height: auto;
    padding: 30px 24px;
}

.service-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    font-size: 22px;
}

.service-card h3 {
    font-size: 19px;
}

.service-card p {
    font-size: 13px;
}

.service-card .service-link {
    padding-top: 22px;
}


}

@media (prefers-reduced-motion: reduce) {
.service-card,
.service-icon,
.service-link,
.service-link i,
.service-card::before,
.service-card::after {
transition: none;
}


.service-card.reveal {
    opacity: 1;
    transform: none;
}


}


/* =========================================================
   MULTI-PAGE SITE / ABOUT / PROJECTS / CONTACT / LEGAL
========================================================= */
.inner-page { padding-top: 88px; }
.page-hero { position: relative; padding: 34px 0 92px; overflow: hidden; background: radial-gradient(circle at 80% 35%, rgba(212,175,55,.10), transparent 32%), linear-gradient(180deg,#070707,#050505); border-bottom: 1px solid rgba(212,175,55,.12); }
.page-hero::before { content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(212,175,55,.10); border-radius:50%; right:-180px; top:20px; box-shadow:0 0 70px rgba(212,175,55,.08); }
.page-hero-content { max-width: 900px; padding-top: 74px; position:relative; z-index:1; }
.page-hero-content h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(48px,7vw,88px); line-height:1; margin:16px 0 22px; letter-spacing:-2px; }
.page-hero-content p { max-width:760px; color:var(--muted); font-size:18px; line-height:1.8; }
.breadcrumb-wrap { position:relative; z-index:2; }
.breadcrumb { display:flex; align-items:center; gap:12px; color:#777; font-size:13px; letter-spacing:.3px; }
.breadcrumb a { color:var(--gold-light); transition:var(--transition); }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb span:last-child { color:#bdbdbd; }
.inner-section { padding-top:110px; }
.content-section { max-width:850px; margin-bottom:70px; }
.content-section h2, .story-content h2, .contact-details h2, .contact-form-wrap h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(34px,5vw,58px); line-height:1.1; margin:14px 0 24px; letter-spacing:-1.5px; }
.content-section h2 span, .story-content h2 span, .contact-details h2 span, .contact-form-wrap h2 span { color:var(--gold); }
.content-section p, .story-content p, .contact-details > p, .contact-form-wrap > p { color:var(--muted); line-height:1.9; margin-bottom:18px; font-size:16px; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin:95px 0 120px; }
.image-placeholder { min-height:500px; border:1px solid rgba(212,175,55,.22); background:linear-gradient(145deg,#101010,#070707); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.image-placeholder::before, .image-placeholder::after { content:""; position:absolute; border:1px solid rgba(212,175,55,.12); border-radius:50%; }
.image-placeholder::before { width:300px; height:300px; } .image-placeholder::after { width:180px; height:180px; }
.placeholder-mark { width:88px; height:88px; border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold); font-family:"Space Grotesk"; font-size:42px; transform:rotate(45deg); z-index:1; box-shadow:var(--gold-glow); }
.placeholder-mark i, .placeholder-mark::first-letter { transform:rotate(-45deg); }
.image-placeholder > span { margin-top:30px; color:#666; font-size:12px; text-transform:uppercase; letter-spacing:2px; z-index:1; }
.stand-for { margin-bottom:45px; }
.principles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:105px; }
.principle-card { background:linear-gradient(145deg,#111,#090909); border:1px solid rgba(212,175,55,.14); padding:30px 24px; min-height:290px; position:relative; overflow:hidden; transition:var(--transition); }
.principle-card:hover { transform:translateY(-7px); border-color:rgba(212,175,55,.45); box-shadow:var(--gold-glow); }
.principle-card > span { color:var(--gold); font-family:"Space Grotesk"; font-size:12px; }
.principle-card i { display:block; font-size:25px; color:var(--gold); margin:35px 0 22px; }
.principle-card h3 { font-family:"Space Grotesk"; margin-bottom:10px; font-size:20px; }
.principle-card p { color:var(--muted); font-size:14px; line-height:1.7; }
.about-stats, .page-stats { margin-bottom:110px; }
.about-stats .stat-card strong, .page-stats .stat-card strong { font-size:38px; }
.leadership-grid { margin-bottom:30px; }
.leadership-photo { min-height:540px; }
.leader-name { border-left:2px solid var(--gold); padding-left:18px; margin-top:32px; display:flex; flex-direction:column; gap:4px; }
.leader-name strong { font-family:"Space Grotesk"; font-size:19px; } .leader-name span { color:var(--muted); font-size:13px; }
.all-projects-grid { margin-bottom:50px; }
.project-meta { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.project-meta span { color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.tech-list { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 22px; }
.tech-list span { border:1px solid rgba(212,175,55,.16); color:#aaa; padding:5px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.reviews-section { background:#080808; border-top:1px solid rgba(212,175,55,.08); }
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review-card { background:#0d0d0d; border:1px solid rgba(212,175,55,.14); padding:32px; min-height:270px; }
.quote-mark { color:var(--gold); font-size:54px; line-height:.7; font-family:Georgia,serif; }
.review-card p { color:#b4b4b4; line-height:1.8; margin:22px 0; } .review-card strong { display:block; font-family:"Space Grotesk"; } .review-card > span { color:#777; font-size:12px; }
.contact-page-section { padding-bottom:120px; }
.contact-page-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:start; }
.contact-details { padding-top:15px; }
.contact-detail-item { display:flex; gap:18px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.contact-detail-item i { color:var(--gold); width:25px; font-size:20px; margin-top:4px; }
.contact-detail-item small { display:block; color:#666; text-transform:uppercase; letter-spacing:1px; font-size:10px; margin-bottom:5px; }
.contact-detail-item a, .contact-detail-item strong { color:#ddd; font-size:14px; font-weight:500; }
.contact-form-wrap { background:#0b0b0b; border:1px solid rgba(212,175,55,.16); padding:40px; }
.contact-form { display:grid; gap:18px; margin-top:28px; }
.contact-form label { color:#bcbcbc; font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.contact-form input, .contact-form select, .contact-form textarea { display:block; width:100%; margin-top:8px; border:1px solid #242424; background:#070707; color:#eee; padding:14px 15px; outline:none; font:inherit; transition:var(--transition); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:rgba(212,175,55,.55); box-shadow:0 0 0 3px rgba(212,175,55,.05); }
.contact-form textarea { resize:vertical; min-height:140px; }
.contact-form .btn { border:none; cursor:pointer; justify-content:center; }
.map-wrap { margin-top:55px; }
.map-placeholder { min-height:300px; border:1px solid rgba(212,175,55,.14); background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.08),transparent 45%),#080808; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:30px; }
.map-placeholder i { color:var(--gold); font-size:35px; margin-bottom:16px; } .map-placeholder h3 { font-family:"Space Grotesk"; font-size:24px; margin-bottom:8px; } .map-placeholder p { color:var(--muted); max-width:500px; margin-bottom:20px; }
.legal-page { padding-bottom:120px; }
.legal-layout { display:grid; grid-template-columns:260px 1fr; gap:70px; align-items:start; }
.legal-nav { position:sticky; top:115px; border-left:1px solid rgba(212,175,55,.25); padding-left:20px; display:flex; flex-direction:column; gap:12px; }
.legal-nav span { color:var(--white); font-family:"Space Grotesk"; font-size:14px; margin-bottom:7px; } .legal-nav a { color:#777; font-size:12px; line-height:1.4; transition:var(--transition); } .legal-nav a:hover { color:var(--gold); }
.legal-updated { color:#777; font-size:12px; margin-bottom:55px; }
.legal-section { padding:0 0 50px; margin-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); scroll-margin-top:120px; }
.legal-section > span { color:var(--gold); font-family:"Space Grotesk"; font-size:12px; letter-spacing:1px; } .legal-section h2 { font-family:"Space Grotesk"; font-size:32px; margin:10px 0 18px; } .legal-section p, .legal-section li { color:var(--muted); line-height:1.85; font-size:15px; } .legal-section ul { margin:16px 0 0 20px; display:grid; gap:8px; } .legal-section a { color:var(--gold-light); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.footer-legal-links { display:flex; gap:22px; } .footer-legal-links a { color:#777; font-size:11px; text-transform:uppercase; letter-spacing:.7px; } .footer-legal-links a:hover { color:var(--gold); }
@media (max-width: 1000px) { .principles-grid { grid-template-columns:repeat(2,1fr); } .story-grid, .contact-page-grid, .legal-layout { grid-template-columns:1fr; gap:40px; } .legal-nav { position:static; } .reviews-grid { grid-template-columns:1fr; } .legal-nav { display:grid; grid-template-columns:repeat(2,1fr); } .legal-nav span { grid-column:1/-1; } }
@media (max-width: 700px) { .inner-page { padding-top:76px; } .page-hero { padding-bottom:65px; } .page-hero-content { padding-top:55px; } .page-hero-content h1 { letter-spacing:-1px; } .page-hero-content p { font-size:15px; } .inner-section { padding-top:75px; } .story-grid { margin:60px 0 80px; } .image-placeholder { min-height:360px; } .principles-grid { grid-template-columns:1fr; } .principle-card { min-height:auto; } .about-stats, .page-stats { margin-bottom:75px; } .leadership-photo { min-height:360px; } .contact-form-wrap { padding:25px 20px; } .legal-nav { grid-template-columns:1fr; } .footer-bottom-inner { flex-direction:column; align-items:flex-start; } .footer-legal-links { gap:15px; flex-wrap:wrap; } }

/* Statistics formatting */
.about-stats .stat-card:nth-child(1) strong::after, .about-stats .stat-card:nth-child(2) strong::after, .about-stats .stat-card:nth-child(3) strong::after, .page-stats .stat-card:nth-child(1) strong::after, .page-stats .stat-card:nth-child(2) strong::after, .page-stats .stat-card:nth-child(3) strong::after { content:"+"; color:var(--gold); font-size:.65em; margin-left:3px; }
.about-stats .stat-card:nth-child(4) strong::after, .page-stats .stat-card:nth-child(4) strong::after { content:"%"; color:var(--gold); font-size:.65em; margin-left:2px; }

.leadership-photo {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 550px;
    overflow: hidden;
    border-radius: 24px;
    background: #111;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.leadership-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}
.leadership-photo {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(212, 175, 55, 0.10);
}
.story-image {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 24px;
    background: #111;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

.story-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}