@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root {
    --bg:#080a0f;
    --panel:#10131a;
    --panel2:#141821;
    --text:#f5f7fb;
    --muted:#9ba3b4;
    --line:#242936;
    --accent:#7c5cff;
    --accent2:#00d4ff;
    --max:1180px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    line-height:1.6
}

a {
    color:inherit;
    text-decoration:none
}

.container {
    width:min(calc(100% - 40px),var(--max));
    margin:auto
}

.navbar-wrap {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(8,10,15,.78);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06)
}

.navbar {
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand {
    display:flex;
    gap:10px;
    align-items:center;
    font:700 16px 'Space Grotesk';
    letter-spacing:.08em
}

.brand-mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff;
    box-shadow:0 0 35px rgba(124,92,255,.35)
}

.nav-links {
    display:flex;
    align-items:center;
    gap:27px;
    font-size:14px;
    color:#b7bdc9
}

.nav-links a:hover,.nav-links a.active {
    color:#fff
}

.nav-cta {
    padding:10px 16px;
    border:1px solid #353b49;
    border-radius:10px;
    color:#fff!important;
    background:#11151e
}

.nav-toggle {
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:24px
}

.hero {
    min-height:650px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:60px
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#a9b0c0;
    font-size:11px;
    font-weight:700;
    letter-spacing:.17em
}

.pulse,.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5dffae;
    box-shadow:0 0 12px #5dffae
}

.hero h1,.page-hero h1 {
    font:700 clamp(50px,7vw,88px)/.98 'Space Grotesk';
    letter-spacing:-.055em;
    margin:20px 0
}

.hero h1 span,.page-hero h1 span,h2 span {
    color:#8984ff
}

.hero-copy>p,.page-hero p {
    max-width:650px;
    color:var(--muted);
    font-size:18px
}

.hero-actions {
    display:flex;
    gap:12px;
    margin:30px 0
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:11px;
    padding:13px 20px;
    font-weight:700;
    font-size:14px;
    border:1px solid transparent;
    cursor:pointer
}

.btn-primary {
    background:linear-gradient(135deg,var(--accent),#5b8dff);
    color:#fff;
    box-shadow:0 15px 35px rgba(92,83,255,.22)
}

.btn-ghost {
    border-color:#323744;
    background:#10131a
}

.hero-trust {
    display:flex;
    gap:12px;
    color:#5f6675;
    font:700 10px 'Space Grotesk';
    letter-spacing:.18em
}

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

.orb {
    position:absolute;
    border-radius:50%;
    filter:blur(50px);
    opacity:.35
}

.orb-one {
    width:260px;
    height:260px;
    background:var(--accent);
    top:40px;
    right:50px
}

.orb-two {
    width:180px;
    height:180px;
    background:var(--accent2);
    bottom:20px;
    left:60px
}

.code-card {
    position:relative;
    width:min(100%,500px);
    background:rgba(17,20,28,.9);
    border:1px solid #303746;
    border-radius:18px;
    box-shadow:0 35px 80px #0008;
    overflow:hidden;
    transform:rotate(2deg)
}

.code-top {
    height:48px;
    border-bottom:1px solid #282e3a;
    display:flex;
    align-items:center;
    padding:0 16px;
    gap:7px
}

.code-top span {
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3c4351
}

.code-top b {
    margin-left:auto;
    font:500 11px monospace;
    color:#747d8e
}

.code-card pre {
    margin:0;
    padding:32px;
    font:14px/2 monospace;
    color:#dce2ec
}

.pink {
    color:#ff7ab6
}

.blue {
    color:#73b9ff
}

.green {
    color:#8fe388
}

.code-status {
    border-top:1px solid #282e3a;
    padding:13px 18px;
    font-size:10px;
    letter-spacing:.15em;
    color:#778193;
    display:flex;
    gap:9px;
    align-items:center
}

.section {
    padding:105px 0
}

.section-dark {
    background:#0c0f15;
    border-top:1px solid #151a23;
    border-bottom:1px solid #151a23
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:40px
}

.section-heading h2,.pricing-intro h2,.two-col h2 {
    font:600 clamp(34px,4vw,52px)/1.05 'Space Grotesk';
    letter-spacing:-.04em;
    margin:12px 0
}

.section-heading>p {
    max-width:400px;
    color:var(--muted)
}

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

.division-card {
    position:relative;
    min-height:390px;
    padding:40px;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(145deg,#11151d,#0c0f15);
    overflow:hidden;
    transition:.25s
}

.division-card:hover {
    transform:translateY(-5px);
    border-color:#3c4352
}

.business-card:after,.gaming-card:after {
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    filter:blur(55px);
    opacity:.15;
    right:-90px;
    bottom:-110px;
    background:var(--accent)
}

.gaming-card:after {
    background:var(--accent2)
}

.card-icon {
    font-size:28px;
    margin-bottom:80px
}

.card-kicker,.service-card>span,.package>span {
    font:700 10px 'Space Grotesk';
    letter-spacing:.18em;
    color:#70798a
}

.division-card h3 {
    font:600 32px 'Space Grotesk';
    margin:8px 0
}

.division-card p {
    color:var(--muted);
    max-width:520px
}

.card-link {
    display:block;
    margin-top:30px;
    font-weight:700;
    font-size:13px
}

.card-link b {
    margin-left:8px
}

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

.stats-grid>div {
    padding:20px;
    border-right:1px solid var(--line)
}

.stats-grid strong {
    font:600 40px 'Space Grotesk';
    display:block
}

.stats-grid span {
    font-size:13px;
    color:var(--muted)
}

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

.service-card {
    border:1px solid var(--line);
    padding:25px;
    border-radius:15px;
    background:#0d1016;
    min-height:210px;
    transition:.25s
}

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

.service-card h3 {
    font:600 20px 'Space Grotesk';
    margin:35px 0 8px
}

.service-card p,.portfolio-item p {
    font-size:13px;
    color:var(--muted)
}

.cta-section {
    padding:40px 0 100px
}

.cta-box {
    border:1px solid #303645;
    border-radius:20px;
    padding:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:radial-gradient(circle at 80% 20%,rgba(124,92,255,.16),transparent 35%),#0d1016
}

.cta-box h2 {
    font:600 42px 'Space Grotesk';
    margin:8px 0
}

.cta-box p {
    color:var(--muted);
    margin:0
}

.page-hero {
    padding:110px 0 80px
}

.page-hero h1 {
    font-size:clamp(48px,7vw,78px)
}

.service-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:end;
    margin-bottom:45px
}

.service-number {
    font:700 11px 'Space Grotesk';
    color:#777f90;
    letter-spacing:.2em
}

.service-detail h2 {
    font:600 42px/1.05 'Space Grotesk';
    margin:10px 0;
    letter-spacing:-.04em
}

.service-detail>p {
    color:var(--muted);
    max-width:550px
}

.feature-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line)
}

.feature-list>div {
    padding:25px;
    border-right:1px solid var(--line)
}

.feature-list b {
    color:#70798a;
    font:700 10px 'Space Grotesk'
}

.feature-list h3 {
    font:600 18px 'Space Grotesk'
}

.feature-list p,.design-tile p,.fivem-grid p {
    font-size:13px;
    color:var(--muted)
}

.design-grid,.fivem-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}

.design-tile {
    padding:35px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#10141c;
    min-height:220px
}

.design-tile span {
    font:700 10px 'Space Grotesk';
    letter-spacing:.17em;
    color:#737c8e
}

.design-tile h3 {
    font:600 24px 'Space Grotesk';
    margin-top:50px
}

.pricing-intro {
    max-width:720px;
    margin-bottom:40px
}

.pricing-intro p {
    color:var(--muted)
}

.package-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}

.package {
    padding:30px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#0d1016
}

.package.featured {
    border-color:#6253cf;
    box-shadow:0 0 45px rgba(124,92,255,.09)
}

.package h3 {
    font:600 25px 'Space Grotesk'
}

.price {
    font-size:20px;
    font-weight:700
}

.package ul {
    padding:0;
    list-style:none;
    color:var(--muted);
    font-size:13px;
    line-height:2
}

.package li:before {
    content:'✓';
    color:#8e83ff;
    margin-right:10px
}

.package a {
    display:block;
    margin-top:25px;
    font-weight:700;
    font-size:13px
}

.pill-list {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}

.pill-list span {
    border:1px solid #2a303d;
    background:#11151d;
    padding:10px 14px;
    border-radius:999px;
    font-size:12px;
    color:#c2c8d4
}

.fivem-grid {
    grid-template-columns:repeat(4,1fr)
}

.fivem-grid>div {
    padding:25px;
    border:1px solid var(--line);
    border-radius:15px
}

.fivem-grid h3 {
    font:600 19px 'Space Grotesk'
}

.filter-bar {
    display:flex;
    gap:8px;
    margin-bottom:30px;
    flex-wrap:wrap
}

.filter {
    border:1px solid var(--line);
    background:#0e1117;
    color:#9ca5b5;
    padding:9px 15px;
    border-radius:999px;
    cursor:pointer
}

.filter.active,.filter:hover {
    background:#6d5bff;
    color:#fff;
    border-color:#6d5bff
}

.portfolio-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px
}

.portfolio-item {
    padding-bottom:15px
}

.portfolio-art {
    height:290px;
    border-radius:16px;
    border:1px solid var(--line);
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden
}

.portfolio-art span {
    font:700 10px 'Space Grotesk';
    letter-spacing:.18em;
    color:#a6adbc
}

.portfolio-art strong {
    font:600 30px 'Space Grotesk';
    max-width:330px
}

.art-web {
    background:radial-gradient(circle at 75% 25%,#6554db33,transparent 30%),linear-gradient(145deg,#141926,#0c0f15)
}

.art-discord {
    background:radial-gradient(circle at 20% 30%,#00d4ff22,transparent 30%),#0c141a
}

.art-fivem {
    background:radial-gradient(circle at 80% 80%,#7c5cff33,transparent 30%),#111017
}

.art-design {
    background:linear-gradient(135deg,#19151c,#0c0f15)
}

.portfolio-item h3 {
    margin:16px 0 3px;
    font:600 19px 'Space Grotesk'
}

.two-col {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px
}

.prose {
    color:var(--muted);
    font-size:17px
}

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

.values-grid>div {
    border:1px solid var(--line);
    padding:30px;
    border-radius:15px
}

.values-grid span {
    font:700 10px 'Space Grotesk';
    color:#747d8f
}

.values-grid h3 {
    font:600 23px 'Space Grotesk'
}

.values-grid p {
    color:var(--muted);
    font-size:13px
}

.contact-grid,.request-layout {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:25px;
    align-items:start
}

.contact-panel {
    padding:35px
}

.contact-panel h2 {
    font:600 36px 'Space Grotesk';
    line-height:1.1
}

.contact-method {
    display:flex;
    gap:15px;
    padding:18px 0;
    border-bottom:1px solid var(--line)
}

.contact-method>span {
    font-size:20px
}

.contact-method p {
    margin:2px 0;
    color:var(--muted);
    font-size:13px
}

.form-card {
    border:1px solid var(--line);
    background:#0e1117;
    border-radius:17px;
    padding:30px
}

.form-card h3 {
    font:600 25px 'Space Grotesk';
    margin-top:0
}

.form-card label {
    display:block;
    font-size:12px;
    color:#aeb5c2;
    margin:15px 0
}

.form-card input,.form-card textarea,.form-card select {
    display:block;
    width:100%;
    margin-top:7px;
    border:1px solid #2a303b;
    background:#090c11;
    color:#fff;
    border-radius:9px;
    padding:12px;
    font:inherit;
    outline:none
}

.form-card input:focus,.form-card textarea:focus,.form-card select:focus {
    border-color:#6657d9
}

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px
}

.form-card fieldset {
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px;
    margin:20px 0
}

.form-card legend {
    padding:0 7px;
    color:#c5cad4;
    font-size:12px
}

.check-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.check-grid label {
    margin:0;
    color:#c4cad5
}

.check-grid input {
    display:inline;
    width:auto;
    margin-right:7px
}

.form-card small {
    display:block;
    color:#687284;
    font-size:11px;
    margin-top:12px
}

.request-aside {
    display:grid;
    gap:15px
}

.request-aside>div {
    border:1px solid var(--line);
    border-radius:16px;
    padding:25px;
    background:#0d1016
}

.request-aside ol {
    padding:0;
    list-style:none
}

.request-aside li {
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:#aeb5c2
}

.request-aside li:last-child {
    border:0
}

.request-aside li b {
    display:inline-block;
    width:30px;
    color:#7c70ef
}

.aside-note p {
    color:var(--muted);
    font-size:13px
}

.footer {
    border-top:1px solid #171b24;
    padding:60px 0 25px;
    background:#07090d
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px
}

.footer-brand {
    margin-bottom:20px
}

.footer h4 {
    font:600 13px 'Space Grotesk';
    text-transform:uppercase;
    letter-spacing:.12em
}

.footer-grid a:not(.brand) {
    display:block;
    color:#818999;
    font-size:13px;
    margin:9px 0
}

.muted {
    color:var(--muted);
    font-size:13px;
    max-width:350px
}

.footer-bottom {
    border-top:1px solid #171b24;
    margin-top:40px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    color:#596170;
    font-size:11px
}

@media(max-width:900px) {
    .hero {
        grid-template-columns:1fr;
        padding:70px 0
    }
    .hero-visual {
        display:none
    }
    .service-grid,.fivem-grid {
        grid-template-columns:1fr 1fr
    }
    .feature-list {
        grid-template-columns:1fr 1fr
    }
    .design-grid,.package-grid,.values-grid {
        grid-template-columns:1fr
    }
    .two-col,.service-detail,.contact-grid,.request-layout {
        grid-template-columns:1fr;
        gap:30px
    }
    .section-heading {
        display:block
    }
    .stats-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-grid>div:first-child {
        grid-column:1/-1
    }
    .nav-toggle {
        display:block
    }
    .nav-links {
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#090b10;
        border-bottom:1px solid var(--line);
        padding:20px;
        flex-direction:column;
        align-items:stretch
    }
    .nav-links.open {
        display:flex
    }
    .nav-cta {
        text-align:center
    }
    .portfolio-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:600px) {
    .container {
        width:min(calc(100% - 28px),var(--max))
    }
    .hero h1 {
        font-size:49px
    }
    .page-hero {
        padding:75px 0 50px
    }
    .section {
        padding:75px 0
    }
    .division-grid,.service-grid,.feature-list,.stats-grid,.portfolio-grid,.form-row,.check-grid {
        grid-template-columns:1fr
    }
    .division-card {
        min-height:340px;
        padding:28px
    }
    .card-icon {
        margin-bottom:55px
    }
    .cta-box {
        padding:30px;
        display:block
    }
    .cta-box .btn {
        margin-top:20px
    }
    .footer-grid {
        grid-template-columns:1fr
    }
    .footer-grid>div:first-child {
        grid-column:auto
    }
    .footer-bottom {
        display:block
    }
    .footer-bottom span {
        display:block;
        margin:5px 0
    }
}

.notice {
    padding:14px 16px;
    border-radius:10px;
    margin-bottom:18px;
    background:#172a1e;
    border:1px solid #285c37
}

.notice.error {
    background:#3a1d22;
    border-color:#73323b
}

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

.portfolio-card {
    overflow:hidden;
    border:1px solid #272e3b;
    border-radius:16px;
    background:#121720
}

.portfolio-card img {
    width:100%;
    height:210px;
    object-fit:cover
}

.portfolio-placeholder {
    height:210px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#151a24,#0d1017)
}

.portfolio-placeholder span {
    font-size:50px;
    font-weight:900
}

.portfolio-body {
    padding:20px
}

.portfolio-body h3 {
    margin:7px 0
}

.portfolio-body a {
    color:#fff;
    text-decoration:none;
    font-weight:700
}

@media(max-width:900px) {
    .portfolio-grid {
        grid-template-columns:1fr 1fr
    }
}

@media(max-width:600px) {
    .portfolio-grid {
        grid-template-columns:1fr
    }
}

/* =========================================
   4R DEVELOPMENT - HEADER LOGO
   ========================================= */

.navbar .brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar .brand img.site-logo {
    display: block;
    width: auto !important;
    height: 58px !important;
    max-width: 200px !important;
    max-height: 58px !important;
    object-fit: contain;
}

@media (max-width: 900px) {
    .navbar .brand img.site-logo {
        height: 50px !important;
        max-height: 50px !important;
        max-width: 170px !important;
    }
}

@media (max-width: 600px) {
    .navbar .brand img.site-logo {
        height: 44px !important;
        max-height: 44px !important;
        max-width: 150px !important;
    }
}