/* =========================================================
   GDS — WORDPRESS DEVELOPMENT
   PREMIUM SERVICE PAGE
   STATIC DESIGN — ANIMATION KE LIYE READY
========================================================= */


/* =========================================================
   ROOT / PAGE
========================================================= */

.wpdev-page {

    --wpdev-black: #080808;
    --wpdev-black-soft: #101010;
    --wpdev-panel: #121212;

    --wpdev-white: #ffffff;
    --wpdev-muted: #a5a5a5;
    --wpdev-muted-2: #707070;

    --wpdev-gold: #c9a45c;
    --wpdev-gold-light: #e3c47c;

    --wpdev-border:
        rgba(255, 255, 255, .09);

    --wpdev-border-gold:
        rgba(201, 164, 92, .28);

    background:
        var(--wpdev-black);

    color:
        var(--wpdev-white);

    overflow:
        hidden;

}


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

.wpdev-page .container {

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

    margin-inline:
        auto;

}


/* =========================================================
   COMMON EYEBROW
========================================================= */

.wpdev-page .service-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        22px;

    color:
        var(--wpdev-gold);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.wpdev-page .service-eyebrow-line {

    width:
        30px;

    height:
        1px;

    background:
        var(--wpdev-gold);

    display:
        block;

}


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

.wpdev-section-heading {

    max-width:
        760px;

    margin-bottom:
        70px;

}


.wpdev-section-heading h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(38px, 5vw, 68px);

    line-height:
        .98;

    letter-spacing:
        -.045em;

    font-weight:
        700;

}


.wpdev-section-heading h2 span {

    color:
        var(--wpdev-gold);

}


.wpdev-section-heading p {

    max-width:
        680px;

    margin:
        0;

    color:
        var(--wpdev-muted);

    font-size:
        16px;

    line-height:
        1.8;

}


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

.wpdev-hero {

    position:
        relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    padding:
        120px 0 100px;

    background:
        radial-gradient(
            circle at 82% 45%,
            rgba(201,164,92,.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #0b0b0b 55%,
            #11100d 100%
        );

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

}


.wpdev-hero-bg {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.035),
            transparent 28%
        );

}


.wpdev-hero-grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(420px, .9fr);

    align-items:
        center;

    gap:
        70px;

}


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

.wpdev-hero-content {

    position:
        relative;

    z-index:
        2;

}


.wpdev-hero-content h1 {

    max-width:
        720px;

    margin:
        0 0 28px;

    font-size:
        clamp(48px, 6vw, 82px);

    line-height:
        .94;

    letter-spacing:
        -.055em;

    font-weight:
        700;

}


.wpdev-hero-content h1 span {

    display:
        block;

    color:
        var(--wpdev-gold);

}


.wpdev-hero-content h1 strong {

    display:
        block;

    font-weight:
        700;

    color:
        var(--wpdev-white);

}


.wpdev-hero-content p {

    max-width:
        640px;

    margin:
        0 0 34px;

    color:
        var(--wpdev-muted);

    font-size:
        17px;

    line-height:
        1.8;

}


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

.wpdev-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


.wpdev-page .service-primary-btn,
.wpdev-page .service-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-height:
        52px;

    padding:
        0 22px;

    border-radius:
        3px;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .08em;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

}


.wpdev-page .service-primary-btn {

    color:
        #080808;

    background:
        linear-gradient(
            135deg,
            var(--wpdev-gold-light),
            var(--wpdev-gold)
        );

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

}


.wpdev-page .service-secondary-btn {

    color:
        var(--wpdev-white);

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.14);

}


.wpdev-page .service-primary-btn:hover,
.wpdev-page .service-secondary-btn:hover {

    transform:
        translateY(-2px);

}


.wpdev-page .service-secondary-btn:hover {

    border-color:
        var(--wpdev-gold);

    color:
        var(--wpdev-gold-light);

}


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

.wpdev-hero-trust {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        38px;

    color:
        var(--wpdev-muted-2);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.wpdev-hero-trust i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--wpdev-gold);

    opacity:
        .7;

}


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

.wpdev-hero-visual {

    position:
        relative;

    min-height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.wpdev-browser-card {

    position:
        relative;

    width:
        min(100%, 500px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        12px;

    background:
        #111;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.5);

    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);

    transition:
        transform .25s ease;

}


/* =========================================================
   BROWSER TOP
========================================================= */

.wpdev-browser-top {

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        0 17px;

    background:
        #181818;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.wpdev-browser-dots {

    display:
        flex;

    gap:
        6px;

}


.wpdev-browser-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #555;

}


.wpdev-browser-address {

    flex:
        1;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        4px;

    background:
        rgba(255,255,255,.05);

    color:
        #777;

    font-size:
        9px;

    letter-spacing:
        .08em;

}


/* =========================================================
   BROWSER CONTENT
========================================================= */

.wpdev-browser-content {

    padding:
        22px;

    background:
        linear-gradient(
            145deg,
            #141414,
            #0c0c0c
        );

}


.wpdev-dashboard-header {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.wpdev-dashboard-header > span {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        6px;

    color:
        #090909;

    background:
        var(--wpdev-gold);

    font-size:
        13px;

    font-weight:
        800;

}


.wpdev-dashboard-header > div {

    width:
        45px;

    height:
        5px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.1);

}


.wpdev-dashboard-header > div:nth-child(3) {

    margin-left:
        auto;

    width:
        28px;

}


.wpdev-dashboard-header > div:nth-child(4) {

    width:
        28px;

}


/* =========================================================
   DASHBOARD BODY
========================================================= */

.wpdev-dashboard-body {

    display:
        grid;

    grid-template-columns:
        1fr .8fr;

    gap:
        25px;

    padding:
        35px 5px;

}


.wpdev-dashboard-copy {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}


.wpdev-dashboard-copy small {

    margin-bottom:
        14px;

    color:
        var(--wpdev-gold);

    font-size:
        8px;

    letter-spacing:
        .16em;

}


.wpdev-dashboard-copy strong {

    max-width:
        250px;

    font-size:
        32px;

    line-height:
        1;

    letter-spacing:
        -.04em;

}


.wpdev-dashboard-copy em {

    color:
        var(--wpdev-gold);

    font-style:
        normal;

}


.wpdev-dashboard-copy > span {

    width:
        85%;

    height:
        5px;

    margin-top:
        18px;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.08);

}


.wpdev-dashboard-copy > span:last-child {

    width:
        60%;

    margin-top:
        8px;

}


/* =========================================================
   DASHBOARD VISUAL
========================================================= */

.wpdev-dashboard-visual {

    position:
        relative;

    min-height:
        180px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(201,164,92,.18);

    border-radius:
        8px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(201,164,92,.22),
            transparent 50%
        ),
        #171717;

}


.wpdev-dashboard-visual div {

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    top:
        40px;

    left:
        50%;

    transform:
        translateX(-50%);

    border:
        1px solid
        rgba(201,164,92,.5);

    border-radius:
        50%;

}


.wpdev-dashboard-visual span {

    position:
        absolute;

    width:
        48px;

    height:
        48px;

    top:
        66px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        10px;

    background:
        var(--wpdev-gold);

    box-shadow:
        0 0 35px
        rgba(201,164,92,.25);

}


.wpdev-dashboard-visual i {

    position:
        absolute;

    width:
        150px;

    height:
        1px;

    top:
        90px;

    left:
        50%;

    transform:
        translateX(-50%)
        rotate(35deg);

    background:
        rgba(255,255,255,.14);

}


/* =========================================================
   DASHBOARD STATS
========================================================= */

.wpdev-dashboard-stats {

    display:
        grid;

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

    gap:
        10px;

}


.wpdev-dashboard-stats > div {

    padding:
        15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        6px;

    background:
        rgba(255,255,255,.025);

}


.wpdev-dashboard-stats strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--wpdev-gold-light);

    font-size:
        13px;

}


.wpdev-dashboard-stats span {

    color:
        #666;

    font-size:
        7px;

    letter-spacing:
        .12em;

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.wpdev-floating-card {

    position:
        absolute;

    z-index:
        3;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(201,164,92,.25);

    border-radius:
        5px;

    background:
        rgba(15,15,15,.88);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(12px);

    color:
        var(--wpdev-white);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .1em;

}


.wpdev-floating-one {

    top:
        80px;

    right:
        -15px;

    color:
        var(--wpdev-gold-light);

}


.wpdev-floating-one span {

    display:
        inline-grid;

    place-items:
        center;

    width:
        20px;

    height:
        20px;

    margin-right:
        7px;

    border-radius:
        4px;

    color:
        #080808;

    background:
        var(--wpdev-gold);

}


.wpdev-floating-two {

    left:
        -25px;

    bottom:
        130px;

}


.wpdev-floating-three {

    right:
        25px;

    bottom:
        50px;

    color:
        var(--wpdev-gold-light);

}


/* =========================================================
   BUILD SECTION
========================================================= */

.wpdev-build {

    padding:
        120px 0;

    background:
        #090909;

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

}


.wpdev-build-grid {

    display:
        grid;

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

    gap:
        14px;

}


.wpdev-build-card {

    position:
        relative;

    min-height:
        300px;

    padding:
        30px;

    overflow:
        hidden;

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

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}


.wpdev-build-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--wpdev-border-gold);

    background:
        linear-gradient(
            145deg,
            rgba(201,164,92,.08),
            rgba(255,255,255,.015)
        );

}


.wpdev-card-number {

    position:
        absolute;

    top:
        24px;

    right:
        26px;

    color:
        #444;

    font-size:
        11px;

    letter-spacing:
        .1em;

}


.wpdev-card-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        55px;

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

    border-radius:
        8px;

    color:
        var(--wpdev-gold);

    font-size:
        19px;

}


.wpdev-build-card h3 {

    margin:
        0 0 13px;

    font-size:
        21px;

    letter-spacing:
        -.02em;

}


.wpdev-build-card p {

    margin:
        0;

    color:
        var(--wpdev-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


.wpdev-card-arrow {

    position:
        absolute;

    right:
        27px;

    bottom:
        25px;

    color:
        var(--wpdev-gold);

    font-size:
        18px;

}


/* =========================================================
   PROCESS
========================================================= */

.wpdev-process {

    padding:
        120px 0;

    background:
        #0d0d0d;

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

}


.wpdev-process-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.wpdev-process-card {

    display:
        grid;

    grid-template-columns:
        55px 60px 1fr 30px;

    align-items:
        center;

    gap:
        22px;

    min-height:
        135px;

    padding:
        22px 28px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        7px;

    background:
        rgba(255,255,255,.018);

    transition:
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;

}


.wpdev-process-card:hover,
.wpdev-process-card.wpdev-process-active {

    transform:
        translateX(5px);

    border-color:
        var(--wpdev-border-gold);

    background:
        rgba(201,164,92,.045);

}


.wpdev-process-number {

    color:
        #555;

    font-size:
        11px;

    font-weight:
        700;

}


.wpdev-process-icon {

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(201,164,92,.22);

    border-radius:
        7px;

    color:
        var(--wpdev-gold);

}


.wpdev-process-content > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--wpdev-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;

}


.wpdev-process-content h3 {

    margin:
        0 0 7px;

    font-size:
        21px;

}


.wpdev-process-content p {

    max-width:
        700px;

    margin:
        0;

    color:
        var(--wpdev-muted);

    font-size:
        13px;

    line-height:
        1.65;

}


.wpdev-process-card > strong {

    color:
        #555;

    font-size:
        20px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.wpdev-process-card:hover > strong {

    color:
        var(--wpdev-gold);

    transform:
        translateX(4px);

}


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

.wpdev-process-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        13px;

    margin-top:
        42px;

    color:
        #555;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .15em;

}


.wpdev-process-footer i {

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--wpdev-gold);

}


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

.wpdev-why {

    padding:
        130px 0;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(201,164,92,.08),
            transparent 30%
        ),
        #080808;

}


.wpdev-why-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        90px;

    align-items:
        center;

}


.wpdev-why-content h2 {

    max-width:
        600px;

    margin:
        0 0 24px;

    font-size:
        clamp(40px, 5vw, 66px);

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.wpdev-why-content h2 span {

    display:
        block;

    color:
        var(--wpdev-gold);

}


.wpdev-why-content > p {

    max-width:
        600px;

    margin:
        0 0 35px;

    color:
        var(--wpdev-muted);

    font-size:
        15px;

    line-height:
        1.8;

}


.wpdev-why-points {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.wpdev-why-points > div {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        5px;

    background:
        rgba(255,255,255,.018);

}


.wpdev-why-points strong {

    color:
        var(--wpdev-gold);

    font-size:
        10px;

}


.wpdev-why-points span {

    color:
        #aaa;

    font-size:
        11px;

}


/* =========================================================
   WORDPRESS ORBIT VISUAL
========================================================= */

.wpdev-why-visual {

    min-height:
        500px;

    display:
        grid;

    place-items:
        center;

}


.wpdev-platform-orbit {

    position:
        relative;

    width:
        400px;

    height:
        400px;

}


.wpdev-orbit-ring {

    position:
        absolute;

    inset:
        50% auto auto 50%;

    border:
        1px solid
        rgba(201,164,92,.2);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

}


.wpdev-orbit-ring-one {

    width:
        290px;

    height:
        290px;

}


.wpdev-orbit-ring-two {

    width:
        190px;

    height:
        190px;

    border-color:
        rgba(255,255,255,.08);

}


.wpdev-orbit-core {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        105px;

    height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%, -50%);

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(201,164,92,.18),
            #111 65%
        );

    box-shadow:
        0 0 60px
        rgba(201,164,92,.1);

}


.wpdev-orbit-core span {

    color:
        var(--wpdev-gold-light);

    font-size:
        29px;

    font-weight:
        800;

}


.wpdev-orbit-core small {

    color:
        #777;

    font-size:
        7px;

    letter-spacing:
        .16em;

}


.wpdev-orbit-node {

    position:
        absolute;

    display:
        grid;

    place-items:
        center;

    width:
        62px;

    height:
        62px;

    border:
        1px solid
        rgba(201,164,92,.2);

    border-radius:
        50%;

    background:
        #111;

    color:
        #aaa;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .08em;

}


.wpdev-node-one {

    top:
        35px;

    left:
        50%;

    transform:
        translateX(-50%);

}


.wpdev-node-two {

    right:
        20px;

    top:
        50%;

    transform:
        translateY(-50%);

}


.wpdev-node-three {

    bottom:
        35px;

    left:
        50%;

    transform:
        translateX(-50%);

}


.wpdev-node-four {

    left:
        20px;

    top:
        50%;

    transform:
        translateY(-50%);

}


/* =========================================================
   CAPABILITIES
========================================================= */

.wpdev-capabilities {

    padding:
        120px 0;

    background:
        #0c0c0c;

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

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

}


.wpdev-capability-grid {

    display:
        grid;

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

    gap:
        14px;

}


.wpdev-capability-card {

    padding:
        35px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        8px;

    background:
        rgba(255,255,255,.018);

    transition:
        border-color .3s ease,
        transform .3s ease;

}


.wpdev-capability-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--wpdev-border-gold);

}


.wpdev-capability-card > span {

    color:
        var(--wpdev-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .16em;

}


.wpdev-capability-card h3 {

    margin:
        15px 0 22px;

    font-size:
        25px;

    letter-spacing:
        -.03em;

}


.wpdev-capability-card ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.wpdev-capability-card li {

    position:
        relative;

    padding:
        11px 0 11px 20px;

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

    color:
        #999;

    font-size:
        12px;

}


.wpdev-capability-card li::before {

    content:
        "→";

    position:
        absolute;

    left:
        0;

    color:
        var(--wpdev-gold);

}





/* =========================================================
   PERFORMANCE
========================================================= */

.wpdev-performance {

    padding:
        120px 0;

    background:
        #080808;

}


.wpdev-performance-card {

    display:
        grid;

    grid-template-columns:
        1fr .85fr;

    gap:
        70px;

    align-items:
        center;

    padding:
        70px;

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

    border-radius:
        10px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(201,164,92,.09),
            transparent 38%
        ),
        #101010;

}


.wpdev-performance-content h2 {

    max-width:
        600px;

    margin:
        0 0 24px;

    font-size:
        clamp(38px, 5vw, 62px);

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.wpdev-performance-content h2 span {

    color:
        var(--wpdev-gold);

}


.wpdev-performance-content p {

    max-width:
        570px;

    margin:
        0 0 28px;

    color:
        var(--wpdev-muted);

    line-height:
        1.8;

    font-size:
        14px;

}


.wpdev-performance-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.wpdev-performance-tags span {

    padding:
        8px 11px;

    border:
        1px solid
        rgba(201,164,92,.18);

    border-radius:
        3px;

    color:
        var(--wpdev-gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* =========================================================
   PERFORMANCE SCREEN
========================================================= */

.wpdev-performance-visual {

    display:
        flex;

    justify-content:
        center;

}


.wpdev-performance-screen {

    width:
        min(100%, 370px);

    padding:
        25px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        8px;

    background:
        #0b0b0b;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.4);

}


.wpdev-screen-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}


.wpdev-screen-top span {

    color:
        #777;

    font-size:
        9px;

    letter-spacing:
        .14em;

}


.wpdev-screen-top strong {

    color:
        var(--wpdev-gold);

    font-size:
        8px;

    letter-spacing:
        .1em;

}


.wpdev-performance-bars {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

    padding-top:
        25px;

}


.wpdev-performance-bars > div span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #777;

    font-size:
        8px;

    letter-spacing:
        .1em;

}


.wpdev-performance-bars i {

    display:
        block;

    height:
        5px;

    overflow:
        hidden;

    border-radius:
        10px;

    background:
        rgba(255,255,255,.07);

}


.wpdev-performance-bars b {

    display:
        block;

    width:
        86%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--wpdev-gold),
            var(--wpdev-gold-light)
        );

}


/* =========================================================
   FAQ
========================================================= */

.wpdev-faq {

    padding:
        120px 0;

    background:
        #0b0b0b;

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

}


.wpdev-faq-grid {

    display:
        grid;

    grid-template-columns:
        .75fr 1.25fr;

    gap:
        90px;

    align-items:
        start;

}


.wpdev-faq-intro h2 {

    margin:
        0 0 22px;

    font-size:
        clamp(38px, 5vw, 62px);

    line-height:
        1;

    letter-spacing:
        -.045em;

}


.wpdev-faq-intro h2 span {

    display:
        block;

    color:
        var(--wpdev-gold);

}


.wpdev-faq-intro p {

    max-width:
        430px;

    margin:
        0;

    color:
        var(--wpdev-muted);

    line-height:
        1.8;

    font-size:
        14px;

}


.wpdev-faq-list {

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

}


.wpdev-faq-item {

    border-bottom:
        1px solid
        rgba(255,255,255,.1);

}


.wpdev-faq-question {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        24px 0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--wpdev-white);

    text-align:
        left;

    cursor:
        pointer;

    font:
        inherit;

}


.wpdev-faq-question span {

    font-size:
        14px;

    font-weight:
        600;

}


.wpdev-faq-question strong {

    flex:
        0 0 auto;

    color:
        var(--wpdev-gold);

    font-size:
        22px;

    font-weight:
        400;

}


.wpdev-faq-answer {

    display:
        grid;

    grid-template-rows:
        0fr;

    transition:
        grid-template-rows .35s ease;

}


.wpdev-faq-answer p {

    min-height:
        0;

    overflow:
        hidden;

    margin:
        0;

    color:
        var(--wpdev-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


.wpdev-faq-open
.wpdev-faq-answer {

    grid-template-rows:
        1fr;

}


.wpdev-faq-open
.wpdev-faq-answer p {

    padding-bottom:
        24px;

}


/* =========================================================
   FINAL CTA
========================================================= */

.wpdev-final-cta {

    padding:
        0 0 100px;

    background:
        #0b0b0b;

}


.wpdev-final-card {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        65px;

    overflow:
        hidden;

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

    border-radius:
        10px;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(201,164,92,.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #111,
            #0b0b0b
        );

}


.wpdev-final-card::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    top:
        -180px;

    right:
        -80px;

    border:
        1px solid
        rgba(201,164,92,.13);

    border-radius:
        50%;

}


.wpdev-final-content {

    position:
        relative;

    z-index:
        1;

}


.wpdev-final-content > span {

    display:
        block;

    margin-bottom:
        16px;

    color:
        var(--wpdev-gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .18em;

}


.wpdev-final-content h2 {

    max-width:
        700px;

    margin:
        0 0 16px;

    font-size:
        clamp(38px, 5vw, 65px);

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.wpdev-final-content h2 em {

    color:
        var(--wpdev-gold);

    font-style:
        normal;

}


.wpdev-final-content p {

    margin:
        0;

    color:
        var(--wpdev-muted);

    font-size:
        14px;

}


.wpdev-final-card
.service-primary-btn {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

}


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

@media (max-width: 1000px) {

    .wpdev-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .wpdev-hero-content {

        max-width:
            760px;

    }


    .wpdev-hero-visual {

        min-height:
            430px;

    }


    .wpdev-build-grid {

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

    }


    .wpdev-why-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .wpdev-why-visual {

        min-height:
            430px;

    }


    .wpdev-performance-card {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .wpdev-faq-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

}


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

@media (max-width: 700px) {

    .wpdev-page .container {

        width:
            min(
                100% - 30px,
                1180px
            );

    }


    .wpdev-hero {

        min-height:
            auto;

        padding:
            90px 0 75px;

    }


    .wpdev-hero-content h1 {

        font-size:
            clamp(43px, 13vw, 62px);

    }


    .wpdev-hero-content p {

        font-size:
            14px;

        line-height:
            1.75;

    }


    .wpdev-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .wpdev-page .service-primary-btn,
    .wpdev-page .service-secondary-btn {

        width:
            100%;

    }


    .wpdev-hero-trust {

        gap:
            8px;

        line-height:
            1.7;

    }


    .wpdev-hero-visual {

        min-height:
            350px;

    }


    .wpdev-browser-card {

        width:
            100%;

        transform:
            none;

    }


    .wpdev-floating-card {

        display:
            none;

    }


    .wpdev-browser-content {

        padding:
            15px;

    }


    .wpdev-dashboard-body {

        grid-template-columns:
            1fr;

        padding:
            25px 0;

    }


    .wpdev-dashboard-visual {

        min-height:
            140px;

    }


    .wpdev-dashboard-stats {

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

    }


    .wpdev-dashboard-stats > div {

        padding:
            10px;

    }


    .wpdev-dashboard-stats strong {

        font-size:
            10px;

    }


    .wpdev-build,
    .wpdev-process,
    .wpdev-why,
    .wpdev-capabilities,
    .wpdev-performance,
    .wpdev-faq {

        padding:
            85px 0;

    }


    .wpdev-section-heading {

        margin-bottom:
            45px;

    }


    .wpdev-section-heading h2 {

        font-size:
            clamp(36px, 11vw, 50px);

    }


    .wpdev-build-grid {

        grid-template-columns:
            1fr;

    }


    .wpdev-build-card {

        min-height:
            270px;

        padding:
            26px;

    }


    .wpdev-card-icon {

        margin-bottom:
            48px;

    }


    .wpdev-process-card {

        grid-template-columns:
            40px 48px 1fr;

        gap:
            14px;

        min-height:
            150px;

        padding:
            20px;

    }


    .wpdev-process-card > strong {

        display:
            none;

    }


    .wpdev-process-icon {

        width:
            40px;

        height:
            40px;

    }


    .wpdev-process-content h3 {

        font-size:
            18px;

    }


    .wpdev-process-content p {

        font-size:
            12px;

    }


    .wpdev-process-footer {

        justify-content:
            flex-start;

        gap:
            8px;

        line-height:
            2;

    }


    .wpdev-why-grid {

        gap:
            30px;

    }


    .wpdev-why-content h2 {

        font-size:
            clamp(38px, 11vw, 52px);

    }


    .wpdev-why-points {

        grid-template-columns:
            1fr;

    }


    .wpdev-platform-orbit {

        width:
            300px;

        height:
            300px;

    }


    .wpdev-orbit-ring-one {

        width:
            220px;

        height:
            220px;

    }


    .wpdev-orbit-ring-two {

        width:
            145px;

        height:
            145px;

    }


    .wpdev-orbit-core {

        width:
            82px;

        height:
            82px;

    }


    .wpdev-orbit-core span {

        font-size:
            23px;

    }


    .wpdev-orbit-node {

        width:
            50px;

        height:
            50px;

        font-size:
            7px;

    }


    .wpdev-node-one {

        top:
            18px;

    }


    .wpdev-node-two {

        right:
            0;

    }


    .wpdev-node-three {

        bottom:
            18px;

    }


    .wpdev-node-four {

        left:
            0;

    }


    .wpdev-capability-grid {

        grid-template-columns:
            1fr;

    }


    .wpdev-capability-card {

        padding:
            27px;

    }


    .wpdev-performance-card {

        padding:
            32px 24px;

        gap:
            35px;

    }


    .wpdev-performance-content h2 {

        font-size:
            clamp(36px, 11vw, 50px);

    }


    .wpdev-performance-screen {

        padding:
            20px;

    }


    .wpdev-faq-grid {

        gap:
            40px;

    }


    .wpdev-faq-intro h2 {

        font-size:
            clamp(38px, 11vw, 52px);

    }


    .wpdev-faq-question {

        padding:
            20px 0;

    }


    .wpdev-faq-question span {

        font-size:
            13px;

    }


    .wpdev-final-cta {

        padding-bottom:
            70px;

    }


    .wpdev-final-card {

        flex-direction:
            column;

        align-items:
            flex-start;

        padding:
            38px 25px;

    }


    .wpdev-final-card
    .service-primary-btn {

        width:
            100%;

    }


}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 420px) {

    .wpdev-dashboard-stats span {

        font-size:
            6px;

    }


    .wpdev-dashboard-copy strong {

        font-size:
            27px;

    }


    .wpdev-process-card {

        grid-template-columns:
            35px 42px 1fr;

        padding:
            17px;

    }


    .wpdev-process-icon {

        width:
            38px;

        height:
            38px;

    }

}




/* =========================================================
   GDS — WORDPRESS DEVELOPMENT
   ORBIT + PERFORMANCE MOTION
========================================================= */


/* =====================================================
   ORBIT SYSTEM
===================================================== */

.wpdev-platform-orbit {

    --wpdev-orbit-rotation: 0deg;

}


/* Outer rings remain stable */

.wpdev-orbit-ring {

    transform-origin:
        center center;

}


/* Nodes move subtly with the orbit */

.wpdev-platform-orbit
.wpdev-orbit-node {

    transform:
        rotate(
            var(--wpdev-orbit-rotation)
        );

}


/* Keep node text visually upright */

.wpdev-platform-orbit
.wpdev-orbit-node {

    transition:
        transform .15s linear;

}


/* =====================================================
   CORE PULSE
===================================================== */

.wpdev-orbit-core-live {

    animation:
        wpdevCorePulse
        3.8s
        ease-in-out
        infinite;

}


@keyframes wpdevCorePulse {

    0%,
    100% {

        box-shadow:
            0 0 0 rgba(212, 171, 91, 0);

    }

    50% {

        box-shadow:
            0 0 28px rgba(212, 171, 91, .10);

    }

}


/* =====================================================
   PERFORMANCE BARS
===================================================== */

.wpdev-performance-bars b {

    display:
        block;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        1.15s
        cubic-bezier(.16, 1, .3, 1);

}


/* Activated by JS */

.wpdev-performance-bars b.wpdev-bar-active {

    transform:
        scaleX(1);

}


/* =====================================================
   PERFORMANCE SCREEN
===================================================== */

.wpdev-performance-screen {

    transition:
        transform .7s
        cubic-bezier(.16, 1, .3, 1),
        box-shadow .7s ease;

}


.wpdev-performance-visible
.wpdev-performance-screen {

    transform:
        translateY(0);

}


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

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

    .wpdev-orbit-core-live {

        animation:
            none !important;

    }


    .wpdev-performance-bars b {

        transform:
            scaleX(1) !important;

        transition:
            none !important;

    }

}







/* =========================================================
   GDS — WORDPRESS DEVELOPMENT
   PREMIUM MOTION SYSTEM
   SAFE — NO INITIAL HIDE / NO BLUR
========================================================= */


/* =========================================================
   SECTION REVEAL
========================================================= */

.wpdev-build-card,
.wpdev-process-card,
.wpdev-capability-card,
.wpdev-why-content,
.wpdev-why-visual,
.wpdev-faq-intro,
.wpdev-faq-list,
.wpdev-final-card {

    transition:
        opacity .7s ease,
        transform .75s cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   JS REVEALED STATE
========================================================= */

.wpdev-build-card.wpdev-visible,
.wpdev-process-card.wpdev-visible,
.wpdev-capability-card.wpdev-visible,
.wpdev-why-content.wpdev-visible,
.wpdev-why-visual.wpdev-visible,
.wpdev-faq-intro.wpdev-visible,
.wpdev-faq-list.wpdev-visible,
.wpdev-final-card.wpdev-visible {

    opacity: 1;

    transform:
        translate3d(0,0,0);

}


/* =========================================================
   STAGGER
========================================================= */

.wpdev-build-card.wpdev-visible,
.wpdev-process-card.wpdev-visible,
.wpdev-capability-card.wpdev-visible {

    transition-delay:
        var(--wpdev-delay,0ms);

}


/* =========================================================
   WHY WORDPRESS — ORBIT BASE
========================================================= */

.wpdev-platform-orbit {

    position: relative;

}


/* =========================================================
   ORBIT RING ONE
   SAFE ROTATION

   IMPORTANT:
   Uses CSS individual "rotate" property instead of
   transform: rotate(), so existing positioning transform
   is NOT overwritten.
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-orbit-ring-one {

    animation:
        wpdevOrbitRingOne
        24s linear infinite;

    transform-origin:
        center center;

}


/* =========================================================
   ORBIT RING TWO
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-orbit-ring-two {

    animation:
        wpdevOrbitRingTwo
        18s linear infinite;

    transform-origin:
        center center;

}


/* =========================================================
   ORBIT NODE ONE
   SAFE FLOAT

   Uses individual "translate" property so the original
   transform / positioning remains untouched.
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-node-one {

    animation:
        wpdevFloatOne
        4.5s ease-in-out infinite;

}


/* =========================================================
   ORBIT NODE TWO
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-node-two {

    animation:
        wpdevFloatTwo
        5s ease-in-out infinite;

}


/* =========================================================
   ORBIT NODE THREE
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-node-three {

    animation:
        wpdevFloatThree
        4.7s ease-in-out infinite;

}


/* =========================================================
   ORBIT NODE FOUR
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-node-four {

    animation:
        wpdevFloatFour
        5.2s ease-in-out infinite;

}


/* =========================================================
   ORBIT CORE
   SAFE SCALE
========================================================= */

.wpdev-platform-orbit.wpdev-orbit-active
.wpdev-orbit-core {

    animation:
        wpdevCorePulse
        3.8s ease-in-out infinite;

}


/* =========================================================
   PERFORMANCE BARS
========================================================= */

.wpdev-performance-visible
.wpdev-performance-bars b {

    animation:
        wpdevPerformanceFill
        1.35s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* =========================================================
   PERFORMANCE BAR STAGGER
========================================================= */

.wpdev-performance-visible
.wpdev-performance-bars > div:nth-child(2) b {

    animation-delay:
        .12s;

}


.wpdev-performance-visible
.wpdev-performance-bars > div:nth-child(3) b {

    animation-delay:
        .24s;

}


.wpdev-performance-visible
.wpdev-performance-bars > div:nth-child(4) b {

    animation-delay:
        .36s;

}


/* =========================================================
   PERFORMANCE BAR ANIMATION
========================================================= */

@keyframes wpdevPerformanceFill {

    from {

        transform:
            scaleX(0);

        transform-origin:
            left center;

    }

    to {

        transform:
            scaleX(1);

        transform-origin:
            left center;

    }

}


/* =========================================================
   ORBIT RING ONE ROTATION
   Uses "rotate" instead of transform.
========================================================= */

@keyframes wpdevOrbitRingOne {

    from {

        rotate:
            0deg;

    }

    to {

        rotate:
            360deg;

    }

}


/* =========================================================
   ORBIT RING TWO ROTATION
========================================================= */

@keyframes wpdevOrbitRingTwo {

    from {

        rotate:
            360deg;

    }

    to {

        rotate:
            0deg;

    }

}


/* =========================================================
   NODE ONE FLOAT
========================================================= */

@keyframes wpdevFloatOne {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 -7px;

    }

}


/* =========================================================
   NODE TWO FLOAT
========================================================= */

@keyframes wpdevFloatTwo {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 6px;

    }

}


/* =========================================================
   NODE THREE FLOAT
========================================================= */

@keyframes wpdevFloatThree {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 -6px;

    }

}


/* =========================================================
   NODE FOUR FLOAT
========================================================= */

@keyframes wpdevFloatFour {

    0%,
    100% {

        translate:
            0 0;

    }

    50% {

        translate:
            0 7px;

    }

}


/* =========================================================
   WP CORE PULSE
========================================================= */

@keyframes wpdevCorePulse {

    0%,
    100% {

        scale:
            1;

    }

    50% {

        scale:
            1.035;

    }

}


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

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


    /* ORBIT */

    .wpdev-platform-orbit
    .wpdev-orbit-ring-one,
    .wpdev-platform-orbit
    .wpdev-orbit-ring-two,
    .wpdev-platform-orbit
    .wpdev-node-one,
    .wpdev-platform-orbit
    .wpdev-node-two,
    .wpdev-platform-orbit
    .wpdev-node-three,
    .wpdev-platform-orbit
    .wpdev-node-four,
    .wpdev-platform-orbit
    .wpdev-orbit-core {

        animation:
            none !important;

    }


    /* PERFORMANCE BARS */

    .wpdev-performance-bars b {

        animation:
            none !important;

        transform:
            scaleX(1) !important;

    }

}