/* =========================================================
   GDS — CUSTOM PHP DEVELOPMENT
   PREMIUM VIOLET SYSTEM
   VERSION 1.0
========================================================= */


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

.php-page {

    --php-bg:
        #07070a;

    --php-bg-soft:
        #0b0a10;

    --php-card:
        rgba(255,255,255,.025);

    --php-card-hover:
        rgba(139,92,246,.055);

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

    --php-border-violet:
        rgba(139,92,246,.28);

    --php-violet:
        #9b6cff;

    --php-violet-bright:
        #b58cff;

    --php-violet-dark:
        #6d3fe8;

    --php-text:
        #f4f3f7;

    --php-text-soft:
        #a7a5af;

    --php-text-muted:
        #686671;

    --php-radius:
        26px;

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--php-bg);

    color:
        var(--php-text);

    font-family:
        inherit;

}


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

.php-page *,
.php-page *::before,
.php-page *::after {

    box-sizing:
        border-box;

}


.php-page a {

    color:
        inherit;

    text-decoration:
        none;

}


.php-page section {

    position:
        relative;

    width:
        100%;

}


/* =========================================================
   SUBTLE PAGE GLOW
========================================================= */

.php-page::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        0;

    background:

        radial-gradient(
            circle at 78% 14%,
            rgba(123,72,255,.10),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 58%,
            rgba(93,58,180,.055),
            transparent 30%
        );

}


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

.php-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        28px;

    color:
        var(--php-violet-bright);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

}


.php-eyebrow span {

    display:
        block;

    width:
        34px;

    height:
        1px;

    background:
        var(--php-violet);

    box-shadow:
        0 0 12px
        rgba(155,108,255,.45);

}


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

.php-hero {

    min-height:
        880px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        120px 6vw 80px;

    background:

        radial-gradient(
            circle at 82% 45%,
            rgba(108,63,232,.14),
            transparent 32%
        ),

        radial-gradient(
            circle at 18% 75%,
            rgba(76,48,150,.08),
            transparent 30%
        );

}


.php-hero-inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(1400px, 100%);

    margin:
        0 auto;

    display:
        grid;

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

    align-items:
        center;

    gap:
        7vw;

}


.php-hero-content {

    max-width:
        690px;

}


.php-hero h1 {

    margin:
        0;

    font-size:
        clamp(54px, 6vw, 96px);

    line-height:
        .92;

    font-weight:
        400;

    letter-spacing:
        -.065em;

}


.php-hero h1 span {

    display:
        block;

    color:
        var(--php-violet-bright);

    text-shadow:
        0 0 40px
        rgba(155,108,255,.16);

}


.php-hero p {

    max-width:
        650px;

    margin:
        38px 0 0;

    color:
        var(--php-text-soft);

    font-size:
        clamp(16px, 1.35vw, 20px);

    line-height:
        1.75;

}


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

.php-hero-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        32px;

}


.php-hero-tags span {

    padding:
        10px 15px;

    border:
        1px solid
        rgba(155,108,255,.20);

    border-radius:
        999px;

    background:
        rgba(155,108,255,.035);

    color:
        #b8b4c4;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


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

.php-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        38px;

}


.php-hero-actions a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        15px 20px;

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

    border-radius:
        999px;

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

    color:
        #dddbe4;

    font-size:
        13px;

    font-weight:
        600;

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

}


.php-hero-actions a:first-child {

    border-color:
        rgba(155,108,255,.55);

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.95),
            rgba(99,57,205,.9)
        );

    color:
        #fff;

    box-shadow:
        0 12px 40px
        rgba(110,63,220,.20);

}


.php-hero-actions a:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--php-border-violet);

}


.php-hero-actions span {

    color:
        var(--php-violet-bright);

}


.php-hero-actions a:first-child span {

    color:
        #fff;

}


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

.php-hero-visual {

    position:
        relative;

    min-height:
        530px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.php-code-window {

    position:
        relative;

    z-index:
        3;

    width:
        min(100%, 590px);

    border:
        1px solid
        rgba(155,108,255,.20);

    border-radius:
        24px;

    overflow:
        hidden;

    background:
        rgba(10,9,14,.92);

    box-shadow:

        0 30px 100px
        rgba(0,0,0,.48),

        0 0 70px
        rgba(110,63,220,.10);

    backdrop-filter:
        blur(18px);

}


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

.php-code-header {

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        0 20px;

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

    color:
        #77747f;

    font-size:
        11px;

}


.php-window-dots {

    display:
        flex;

    gap:
        6px;

}


.php-window-dots i {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #37343d;

}


.php-window-dots i:first-child {

    background:
        #6b4d9e;

}


.php-code-header strong {

    margin-left:
        auto;

    color:
        var(--php-violet-bright);

    letter-spacing:
        .18em;

}


/* =========================================================
   CODE BODY
========================================================= */

.php-code-body {

    padding:
        30px 28px;

    min-height:
        350px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.015),
            rgba(120,70,240,.025)
        );

}


.php-code-body pre {

    margin:
        0;

    white-space:
        pre-wrap;

    color:
        #96929f;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        13px;

    line-height:
        1.9;

}


.php-code-body code {

    font-family:
        inherit;

}


.php-code-body code > span:first-child {

    color:
        var(--php-violet-bright);

}


.php-keyword {

    color:
        #c59cff;

}


.php-class {

    color:
        #f0cfff;

}


.php-function {

    color:
        #a8c7ff;

}


.php-variable {

    color:
        #e0a8ff;

}


/* =========================================================
   CODE STATUS
========================================================= */

.php-code-status {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        15px 22px;

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

    color:
        #77737e;

    font-size:
        9px;

    letter-spacing:
        .13em;

}


.php-code-status span:first-child {

    color:
        #9d7ce0;

}


/* =========================================================
   FLOATING DATA NODES
========================================================= */

.php-data-node {

    position:
        absolute;

    z-index:
        4;

    min-width:
        92px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(155,108,255,.22);

    border-radius:
        14px;

    background:
        rgba(10,9,14,.88);

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

    text-align:
        center;

    backdrop-filter:
        blur(12px);

}


.php-data-node small {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #77727f;

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.php-data-node strong {

    color:
        var(--php-violet-bright);

    font-size:
        9px;

    letter-spacing:
        .12em;

}


.php-node-api {

    top:
        8%;

    right:
        2%;

}


.php-node-db {

    bottom:
        10%;

    left:
        0;

}


.php-node-auth {

    right:
        -2%;

    bottom:
        25%;

}


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

.php-scroll-indicator {

    position:
        absolute;

    bottom:
        28px;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #5f5b68;

    font-size:
        9px;

    letter-spacing:
        .2em;

}


.php-scroll-indicator span {

    width:
        35px;

    height:
        1px;

    background:
        var(--php-violet);

}


/* =========================================================
   COMMON SECTION CONTAINER
========================================================= */

.php-build,
.php-process,
.php-ecosystem,
.php-why,
.php-comparison,
.php-performance,
.php-use-cases,
.php-final {

    padding:
        130px 6vw;

}


.php-section-heading,
.php-process-heading,
.php-comparison-heading,
.php-performance-heading,
.php-use-heading {

    position:
        relative;

    z-index:
        2;

    width:
        min(900px, 100%);

    margin:
        0 auto 70px;

    text-align:
        center;

}


.php-section-heading h2,
.php-process-heading h2,
.php-comparison-heading h2,
.php-performance-heading h2,
.php-use-heading h2 {

    margin:
        0;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:
        .98;

    font-weight:
        400;

    letter-spacing:
        -.055em;

}


.php-section-heading h2 span,
.php-process-heading h2 span,
.php-comparison-heading h2 span,
.php-performance-heading h2 span,
.php-use-heading h2 span {

    display:
        block;

    color:
        var(--php-violet-bright);

}


.php-section-heading p {

    max-width:
        680px;

    margin:
        28px auto 0;

    color:
        var(--php-text-soft);

    font-size:
        17px;

    line-height:
        1.7;

}


/* =========================================================
   WHAT WE BUILD
========================================================= */

.php-build {

    background:
        linear-gradient(
            180deg,
            #07070a 0%,
            #0a0910 100%
        );

}


.php-build-grid {

    width:
        min(1250px, 100%);

    margin:
        auto;

    display:
        grid;

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

    gap:
        16px;

}


.php-build-card {

    position:
        relative;

    min-height:
        320px;

    padding:
        34px;

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

    border-radius:
        var(--php-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(110,70,220,.025)
        );

    overflow:
        hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        border-color .4s ease,
        background .4s ease;

}


.php-build-card::before {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    top:
        -120px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        rgba(139,92,246,.07);

    filter:
        blur(35px);

    pointer-events:
        none;

}


.php-build-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--php-border-violet);

    background:
        var(--php-card-hover);

}


.php-card-number {

    color:
        #605b69;

    font-size:
        11px;

    letter-spacing:
        .12em;

}


.php-card-icon {

    margin-top:
        45px;

    color:
        var(--php-violet-bright);

    font-family:
        monospace;

    font-size:
        26px;

}


.php-build-card h3 {

    margin:
        20px 0 12px;

    font-size:
        25px;

    font-weight:
        400;

    letter-spacing:
        -.025em;

}


.php-build-card p {

    max-width:
        420px;

    margin:
        0;

    color:
        var(--php-text-soft);

    font-size:
        14px;

    line-height:
        1.7;

}


.php-card-link {

    position:
        absolute;

    right:
        30px;

    bottom:
        30px;

    color:
        var(--php-violet-bright);

    font-size:
        11px;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


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

.php-process {

    background:
        #08080b;

}


.php-process-list {

    width:
        min(1050px, 100%);

    margin:
        auto;

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

}


.php-process-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        80px 1fr auto;

    align-items:
        center;

    gap:
        30px;

    min-height:
        125px;

    padding:
        22px 10px;

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

    transition:
        background .35s ease,
        padding .35s ease;

}


.php-process-step:hover {

    padding-left:
        22px;

    background:
        rgba(139,92,246,.025);

}


.php-process-number {

    color:
        var(--php-violet);

    font-size:
        11px;

    letter-spacing:
        .15em;

}


.php-process-step h3 {

    margin:
        0 0 8px;

    font-size:
        24px;

    font-weight:
        400;

}


.php-process-step p {

    margin:
        0;

    color:
        var(--php-text-soft);

    font-size:
        14px;

    line-height:
        1.6;

}


.php-process-step > strong {

    color:
        #55515c;

    font-size:
        9px;

    letter-spacing:
        .18em;

}


/* =========================================================
   PHP ECOSYSTEM
========================================================= */

.php-ecosystem {

    min-height:
        850px;

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items:
        center;

    gap:
        70px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 75% 50%,
            rgba(117,67,230,.13),
            transparent 34%
        );

}


.php-ecosystem-content {

    max-width:
        580px;

}


.php-ecosystem-content h2 {

    margin:
        0;

    font-size:
        clamp(44px, 5vw, 75px);

    line-height:
        .98;

    font-weight:
        400;

    letter-spacing:
        -.055em;

}


.php-ecosystem-content h2 span {

    display:
        block;

    color:
        var(--php-violet-bright);

}


.php-ecosystem-content p {

    max-width:
        520px;

    margin:
        28px 0 0;

    color:
        var(--php-text-soft);

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   ECOSYSTEM VISUAL
========================================================= */

.php-ecosystem-visual {

    position:
        relative;

    width:
        min(620px, 100%);

    aspect-ratio:
        1 / 1;

    margin:
        auto;

}


.php-ecosystem-ring {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    border:
        1px solid
        rgba(155,108,255,.15);

    border-radius:
        50%;

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

}


.php-ring-one {

    width:
        48%;

    height:
        48%;

}


.php-ring-two {

    width:
        76%;

    height:
        76%;

}


.php-ecosystem-core {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        3;

    width:
        145px;

    height:
        145px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

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

    border:
        1px solid
        rgba(155,108,255,.42);

    border-radius:
        50%;

    background:
        rgba(12,10,17,.95);

    box-shadow:
        0 0 70px
        rgba(111,63,220,.20);

}


.php-ecosystem-core strong {

    color:
        var(--php-violet-bright);

    font-size:
        38px;

    font-weight:
        600;

    letter-spacing:
        -.04em;

}


.php-ecosystem-core small {

    margin-top:
        5px;

    color:
        #696472;

    font-size:
        8px;

    letter-spacing:
        .22em;

}


.php-ecosystem-node {

    position:
        absolute;

    z-index:
        4;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(155,108,255,.20);

    border-radius:
        999px;

    background:
        rgba(10,9,14,.90);

    color:
        #9c97a5;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        .14em;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.3);

    backdrop-filter:
        blur(10px);

}


.php-eco-db {

    top:
        7%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.php-eco-api {

    top:
        28%;

    right:
        4%;

}


.php-eco-auth {

    bottom:
        27%;

    right:
        4%;

}


.php-eco-crm {

    bottom:
        7%;

    left:
        50%;

    transform:
        translateX(-50%);

}


.php-eco-erp {

    bottom:
        27%;

    left:
        4%;

}


.php-eco-auto {

    top:
        28%;

    left:
        4%;

}


/* =========================================================
   WHY CUSTOM PHP
========================================================= */

.php-why {

    background:
        linear-gradient(
            180deg,
            #08080b,
            #0a0910
        );

}


.php-why-heading {

    width:
        min(1050px, 100%);

    margin:
        0 auto 65px;

}


.php-why-heading h2 {

    margin:
        0;

    font-size:
        clamp(45px, 5vw, 78px);

    line-height:
        .98;

    font-weight:
        400;

    letter-spacing:
        -.06em;

}


.php-why-heading h2 span {

    color:
        var(--php-violet-bright);

}


.php-why-grid {

    width:
        min(1200px, 100%);

    margin:
        auto;

    display:
        grid;

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

    gap:
        1px;

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

    background:
        var(--php-border);

}


.php-why-grid article {

    min-height:
        280px;

    padding:
        32px;

    background:
        #09090c;

    transition:
        background .35s ease;

}


.php-why-grid article:hover {

    background:
        rgba(139,92,246,.045);

}


.php-why-grid article > span {

    color:
        var(--php-violet);

    font-size:
        10px;

    letter-spacing:
        .14em;

}


.php-why-grid h3 {

    margin:
        70px 0 15px;

    font-size:
        21px;

    font-weight:
        400;

}


.php-why-grid p {

    margin:
        0;

    color:
        var(--php-text-soft);

    font-size:
        13px;

    line-height:
        1.7;

}


/* =========================================================
   COMPARISON
========================================================= */

.php-comparison {

    background:
        #07070a;

}


.php-comparison-table {

    width:
        min(1050px, 100%);

    margin:
        auto;

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

    border-radius:
        22px;

    overflow:
        hidden;

}


.php-comparison-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        78px;

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

}


.php-comparison-row:last-child {

    border-bottom:
        0;

}


.php-comparison-row > * {

    display:
        flex;

    align-items:
        center;

    padding:
        18px 30px;

}


.php-comparison-row span {

    color:
        #686570;

}


.php-comparison-row strong {

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

    color:
        #d9d5e2;

    font-weight:
        400;

}


.php-comparison-header {

    background:
        rgba(139,92,246,.055);

}


.php-comparison-header span {

    color:
        var(--php-violet-bright);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .18em;

}


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

.php-performance {

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(108,63,232,.08),
            transparent 42%
        );

}


.php-performance-dashboard {

    width:
        min(850px, 100%);

    margin:
        auto;

    padding:
        32px;

    border:
        1px solid
        rgba(155,108,255,.18);

    border-radius:
        24px;

    background:
        rgba(10,9,14,.85);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.35);

}


.php-dashboard-top {

    display:
        flex;

    justify-content:
        space-between;

    padding-bottom:
        24px;

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

    color:
        #77737f;

    font-size:
        10px;

    letter-spacing:
        .18em;

}


.php-dashboard-top strong {

    color:
        var(--php-violet-bright);

}


.php-performance-metric {

    padding:
        27px 0;

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

}


.php-performance-metric:last-child {

    border-bottom:
        0;

}


.php-performance-metric > div:first-child {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        12px;

}


.php-performance-metric span {

    color:
        #77737e;

    font-size:
        9px;

    letter-spacing:
        .16em;

}


.php-performance-metric strong {

    color:
        #b9b3c5;

    font-size:
        11px;

    font-weight:
        500;

}


.php-performance-bar {

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        999px;

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

}


.php-performance-bar b {

    display:
        block;

    width:
        var(--php-progress);

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--php-violet-dark),
            var(--php-violet-bright)
        );

    box-shadow:
        0 0 18px
        rgba(155,108,255,.35);

}


/* =========================================================
   USE CASES
========================================================= */

.php-use-cases {

    background:
        #08080b;

}


.php-use-grid {

    width:
        min(1100px, 100%);

    margin:
        auto;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        10px;

}


.php-use-grid span {

    padding:
        16px 21px;

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

    border-radius:
        999px;

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

    color:
        #aaa6b1;

    font-size:
        12px;

    transition:
        .3s ease;

}


.php-use-grid span:hover {

    border-color:
        var(--php-border-violet);

    color:
        var(--php-violet-bright);

    background:
        rgba(139,92,246,.045);

    transform:
        translateY(-3px);

}


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

.php-final {

    padding:
        130px 6vw 160px;

}


.php-final-card {

    position:
        relative;

    width:
        min(1200px, 100%);

    margin:
        auto;

    padding:
        clamp(45px, 7vw, 90px);

    overflow:
        hidden;

    border:
        1px solid
        rgba(155,108,255,.24);

    border-radius:
        32px;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(125,73,230,.14),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            rgba(108,63,232,.035)
        );

}


.php-final-card::after {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    right:
        -180px;

    bottom:
        -220px;

    border-radius:
        50%;

    background:
        rgba(122,70,230,.10);

    filter:
        blur(50px);

}


.php-final-card h2 {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

    margin:
        0;

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

    line-height:
        .98;

    font-weight:
        400;

    letter-spacing:
        -.06em;

}


.php-final-card h2 span {

    display:
        block;

    color:
        var(--php-violet-bright);

}


.php-final-card p {

    position:
        relative;

    z-index:
        2;

    margin:
        28px 0 0;

    color:
        var(--php-text-soft);

    font-size:
        18px;

}


.php-final-card a {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        35px;

    padding:
        16px 23px;

    border:
        1px solid
        rgba(155,108,255,.45);

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #8c5af0,
            #6539c7
        );

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        600;

    box-shadow:
        0 15px 45px
        rgba(99,57,205,.20);

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

}


.php-final-card a:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 20px 60px
        rgba(99,57,205,.30);

}


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

@media (max-width: 1050px) {

    .php-hero-inner {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .php-hero-content {

        max-width:
            800px;

    }


    .php-hero-visual {

        min-height:
            500px;

    }


    .php-ecosystem {

        grid-template-columns:
            1fr;

    }


    .php-ecosystem-content {

        max-width:
            800px;

        margin:
            auto;

        text-align:
            center;

    }


    .php-ecosystem-content p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .php-ecosystem-content .php-eyebrow {

        justify-content:
            center;

    }


    .php-why-grid {

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

    }

}


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

@media (max-width: 768px) {

    .php-hero {

        min-height:
            auto;

        padding:
            100px 22px 80px;

    }


    .php-hero h1 {

        font-size:
            clamp(48px, 13vw, 70px);

    }


    .php-hero p {

        margin-top:
            28px;

        font-size:
            15px;

        line-height:
            1.7;

    }


    .php-hero-tags {

        gap:
            7px;

    }


    .php-hero-tags span {

        padding:
            8px 11px;

        font-size:
            8px;

    }


    .php-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .php-hero-actions a {

        justify-content:
            center;

    }


    .php-hero-visual {

        min-height:
            410px;

    }


    .php-code-window {

        width:
            100%;

        border-radius:
            18px;

    }


    .php-code-body {

        min-height:
            300px;

        padding:
            22px 18px;

    }


    .php-code-body pre {

        font-size:
            10px;

        line-height:
            1.75;

    }


    .php-code-header {

        height:
            50px;

        padding:
            0 15px;

        font-size:
            9px;

    }


    .php-data-node {

        min-width:
            72px;

        padding:
            9px 10px;

    }


    .php-data-node strong {

        font-size:
            7px;

    }


    .php-node-api {

        top:
            1%;

        right:
            -2%;

    }


    .php-node-db {

        bottom:
            2%;

        left:
            -2%;

    }


    .php-node-auth {

        right:
            -3%;

        bottom:
            22%;

    }


    .php-scroll-indicator {

        display:
            none;

    }


    .php-build,
    .php-process,
    .php-ecosystem,
    .php-why,
    .php-comparison,
    .php-performance,
    .php-use-cases {

        padding:
            90px 22px;

    }


    .php-final {

        padding:
            90px 22px 120px;

    }


    .php-section-heading,
    .php-process-heading,
    .php-comparison-heading,
    .php-performance-heading,
    .php-use-heading {

        margin-bottom:
            45px;

    }


    .php-section-heading h2,
    .php-process-heading h2,
    .php-comparison-heading h2,
    .php-performance-heading h2,
    .php-use-heading h2 {

        font-size:
            clamp(40px, 11vw, 58px);

    }


    .php-section-heading p {

        font-size:
            15px;

    }


    .php-build-grid {

        grid-template-columns:
            1fr;

    }


    .php-build-card {

        min-height:
            280px;

        padding:
            27px;

    }


    .php-process-step {

        grid-template-columns:
            42px 1fr;

        gap:
            15px;

        min-height:
            145px;

    }


    .php-process-step > strong {

        display:
            none;

    }


    .php-process-step h3 {

        font-size:
            21px;

    }


    .php-process-step p {

        font-size:
            13px;

    }


    .php-ecosystem {

        min-height:
            auto;

    }


    .php-ecosystem-visual {

        width:
            100%;

        max-width:
            440px;

    }


    .php-ecosystem-core {

        width:
            110px;

        height:
            110px;

    }


    .php-ecosystem-core strong {

        font-size:
            30px;

    }


    .php-ecosystem-node {

        padding:
            9px 12px;

        font-size:
            7px;

    }


    .php-why-heading {

        margin-bottom:
            45px;

    }


    .php-why-grid {

        grid-template-columns:
            1fr;

    }


    .php-why-grid article {

        min-height:
            220px;

    }


    .php-why-grid h3 {

        margin-top:
            45px;

    }


    .php-comparison-table {

        border-radius:
            17px;

    }


    .php-comparison-row {

        min-height:
            70px;

    }


    .php-comparison-row > * {

        padding:
            14px 16px;

        font-size:
            12px;

    }


    .php-comparison-header span {

        font-size:
            8px;

    }


    .php-performance-dashboard {

        padding:
            20px;

        border-radius:
            18px;

    }


    .php-performance-metric {

        padding:
            22px 0;

    }


    .php-use-grid {

        justify-content:
            flex-start;

    }


    .php-use-grid span {

        padding:
            12px 14px;

        font-size:
            10px;

    }


    .php-final-card {

        padding:
            45px 27px;

        border-radius:
            24px;

    }


    .php-final-card h2 {

        font-size:
            clamp(42px, 12vw, 62px);

    }


    .php-final-card p {

        font-size:
            15px;

    }

}


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

@media (max-width: 430px) {

    .php-hero {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .php-hero h1 {

        font-size:
            47px;

    }


    .php-hero-visual {

        min-height:
            360px;

    }


    .php-code-body {

        min-height:
            270px;

    }


    .php-code-body pre {

        font-size:
            8.5px;

    }


    .php-ecosystem-visual {

        max-width:
            350px;

    }


    .php-ecosystem-core {

        width:
            95px;

        height:
            95px;

    }


    .php-ecosystem-core strong {

        font-size:
            25px;

    }


    .php-ecosystem-node {

        padding:
            7px 9px;

        font-size:
            6px;

    }


    .php-comparison-row > * {

        padding:
            12px 11px;

        font-size:
            10px;

    }

}