:root {
    --ui-bg: #07111b;
    --ui-bg-alt: #0d1724;
    --ui-panel: rgba(13, 23, 36, 0.82);
    --ui-panel-strong: rgba(16, 28, 43, 0.94);
    --ui-border: rgba(255, 92, 92, 0.22);
    --ui-border-strong: rgba(255, 92, 92, 0.42);
    --ui-text: #edf2f8;
    --ui-text-soft: #aab6c6;
    --ui-accent: #ff4d57;
    --ui-accent-strong: #ff2e39;
    --ui-accent-glow: rgba(255, 77, 87, 0.22);
    --ui-success: #5fe3a1;
    --ui-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    --ui-radius: 24px;
    --ui-radius-sm: 16px;
    --ui-container: min(1240px, calc(100% - 32px));
}

html {
    overflow-x: clip;
}

body {
    min-height: 100vh;
    color: var(--ui-text);
    background:
        radial-gradient(circle at top left, rgba(255, 77, 87, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(180deg, #08111b 0%, #0a1420 48%, #09111a 100%);
    overflow-x: clip;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 90%);
    z-index: -2;
}

/* CONSISTENT PROFESSIONAL LAYOUT OVERRIDES */
html { scroll-padding-top: 104px; }

.price-card.popular::before,
.price-card.popular::after,
.project-card::before,
.price-card::before,
.service-tile::before {
    display: none !important;
    content: none !important;
}

.container {
    width: min(1240px, calc(100% - 40px)) !important;
    max-width: 1240px !important;
    margin-inline: auto !important;
    padding: 132px 0 96px !important;
}

.container > * { max-width: 100%; }
.container > h2:not(.section-title) {
    margin: 68px auto 28px !important;
    color: #fff !important;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
    line-height: 1.3 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
}

.section-header {
    max-width: 900px !important;
    margin: 0 auto 64px !important;
    padding-inline: 16px;
    text-align: center !important;
}

.section-header h1 { margin: 0 0 18px !important; line-height: 1.08 !important; }
.section-header p { margin: 0 auto !important; line-height: 1.75 !important; }

.pricing-grid,
.project-grid,
.services-grid,
.modular-grid,
.addon-grid,
.strategy-grid,
.resource-grid {
    width: 100% !important;
    align-items: stretch !important;
    margin-inline: auto !important;
    margin-bottom: 64px !important;
    gap: 22px !important;
}

.price-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 100%;
    padding: 30px 28px 26px !important;
    overflow: hidden;
    text-align: left !important;
}

.price-card.popular {
    border-color: rgba(255, 77, 87, .34) !important;
    box-shadow: var(--ui-shadow), inset 0 2px 0 rgba(255, 77, 87, .72) !important;
}

.price-card .tier-name {
    display: flex;
    align-items: flex-start;
    min-height: 3.1em;
    margin: 0 0 16px !important;
    font-size: clamp(1.05rem, 1.25vw, 1.28rem) !important;
    line-height: 1.42 !important;
    letter-spacing: .025em !important;
    text-align: left !important;
}

.price-card .target-audience {
    display: flex !important;
    width: 100% !important;
    min-height: 52px;
    justify-content: flex-start !important;
    margin: 0 0 18px !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.price-card .price-tag[aria-hidden="true"] { display: none !important; }
.price-card .price-tag:not([aria-hidden="true"]) { margin: 4px 0 20px !important; justify-content: flex-start !important; }

.price-card .disclaimer {
    min-height: 42px;
    margin: 0 0 14px !important;
    color: var(--ui-text-soft) !important;
    font-size: .76rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

.price-card .features-list {
    width: 100%;
    margin: 0 0 24px !important;
    padding: 0 !important;
    flex: 1 1 auto;
    text-align: left !important;
}

.price-card .features-list li {
    position: relative;
    width: 100%;
    min-height: 46px;
    align-items: flex-start !important;
    padding: 12px 0 12px 28px !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
}

.price-card .features-list li::before {
    position: absolute;
    left: 2px;
    top: 12px;
    margin: 0 !important;
}

.price-card > .cta-button {
    width: 100% !important;
    margin-top: auto !important;
    padding: 14px 16px !important;
    text-align: center !important;
}

.project-card { height: 100%; }
.project-content {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    text-align: left !important;
}
.project-content .project-link-button,
.project-content .project-link { margin-top: auto; align-self: flex-start; }

.comparison-wrap,
.tnc-section,
.contact-layout,
.about-grid { width: 100% !important; margin-inline: auto !important; }

@media (max-width: 1120px) {
    .pricing-grid,
    .project-grid,
    .services-grid,
    .modular-grid,
    .addon-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)) !important; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 24px, 1240px) !important; padding-top: 112px !important; }
    .price-card { padding: 22px 20px !important; }
    .price-card .tier-name,
    .price-card .target-audience,
    .price-card .disclaimer { min-height: 0; }
}

/* Mobile scroll performance */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    #bgCanvas { display: none !important; }
    body::after { display: none !important; }

    .d3z-reveal,
    .d3z-reveal.is-revealed {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    .service-tile,
    .price-card,
    .project-card,
    .frame-item,
    .resource-card,
    .strategy-card,
    .intel-card,
    .contact-form-container,
    .contact-details-container,
    .about-content,
    .about-img-wrap {
        will-change: auto !important;
        backdrop-filter: none !important;
    }

    .service-tile:hover,
    .price-card:hover,
    .project-card:hover,
    .resource-card:hover,
    .strategy-card:hover,
    .intel-card:hover { transform: none !important; }
}

/* Mobile closed-menu and owner-image cleanup */
@media (max-width: 1120px) {
    #mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #mobile-menu[style*="600px"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: calc(100svh - 90px) !important;
        overflow-y: auto !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        background: rgba(7,14,22,.98) !important;
        box-shadow: 0 20px 55px rgba(0,0,0,.5) !important;
    }
}

@media (max-width: 640px) {
    .about-section { padding: 56px 0 !important; }
    .about-grid { gap: 24px !important; padding-inline: 14px !important; }

    .about-img-wrap {
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .about-img-wrap > img { border: 0 !important; border-radius: 14px !important; }

    .floating-socials {
        right: 50% !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        flex-direction: row !important;
        transform: translateX(50%);
        padding: 6px !important;
        border-radius: 999px;
        background: rgba(8,13,21,.82);
        border: 1px solid rgba(255,255,255,.08);
        backdrop-filter: blur(10px);
    }

    .floating-social,
    .floating-social__inner {
        width: 40px !important;
        height: 40px !important;
    }

    .floating-social::before,
    .floating-social::after { display: none !important; }
}

/* Visual QA: readable overlays, natural content heights, refined interaction */
.about-grid {
    align-items: center !important;
    gap: clamp(28px, 4vw, 54px) !important;
}

.about-img-wrap {
    position: relative !important;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 4 / 5;
    align-self: center;
    overflow: hidden !important;
    border-radius: 26px !important;
    isolation: isolate;
}

.about-img-wrap > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(.88) contrast(1.03) !important;
    transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .45s ease !important;
}

.owner-overlay {
    position: absolute !important;
    inset: auto 0 0 !important;
    width: 100% !important;
    padding: 64px 22px 20px !important;
    text-align: center !important;
    background: linear-gradient(180deg, transparent 0%, rgba(3,7,12,.78) 42%, rgba(3,7,12,.98) 100%) !important;
    border-top: 0 !important;
    z-index: 2;
    transform: translateY(0);
    transition: padding .35s ease, background .35s ease !important;
}

.owner-overlay h3 {
    margin: 0 0 4px !important;
    color: #fff !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-shadow: 0 2px 14px rgba(0,0,0,.95) !important;
}

.owner-overlay p {
    margin: 0 !important;
    color: rgba(237,242,248,.82) !important;
    font-size: .78rem !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
}

.about-img-wrap:hover > img { transform: scale(1.045); filter: saturate(1) contrast(1.06) !important; }
.about-img-wrap:hover .owner-overlay { padding-bottom: 27px !important; background: linear-gradient(180deg, transparent 0%, rgba(11,4,7,.76) 38%, rgba(9,5,10,.99) 100%) !important; }

.about-content {
    align-self: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(30px, 4vw, 48px) !important;
    border-radius: 26px !important;
}

.about-content h2 { margin: 0 0 24px !important; line-height: 1.1 !important; }
.about-content p { max-width: 68ch; margin: 0 0 16px !important; line-height: 1.75 !important; }

.service-tile,
.price-card,
.project-card,
.frame-item,
.resource-card,
.strategy-card,
.intel-card,
.contact-form-container,
.contact-details-container {
    transform: translateZ(0);
    will-change: transform;
}

.service-tile:hover,
.price-card:hover,
.project-card:hover,
.resource-card:hover,
.strategy-card:hover,
.intel-card:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(255,77,87,.38) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,.46), 0 0 0 1px rgba(255,77,87,.08) !important;
}

.frame-item img,
.project-image-placeholder img {
    transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease !important;
}

.frame-item:hover img,
.project-card:hover .project-image-placeholder img { transform: scale(1.035); filter: saturate(1.06); }

.cta-button,
.section-button,
.project-link-button,
.submit-button { position: relative; overflow: hidden; }

.cta-button::after,
.section-button::after,
.project-link-button::after,
.submit-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 48%, transparent 76%);
    transform: translateX(-130%);
    transition: transform .6s ease;
    pointer-events: none;
}

.cta-button:hover::after,
.section-button:hover::after,
.project-link-button:hover::after,
.submit-button:hover::after { transform: translateX(130%); }

@media (max-width: 900px) {
    .about-img-wrap { max-width: 520px; margin-inline: auto; }
    .about-content { max-width: 680px; margin-inline: auto; }
}

@media (max-width: 1120px) {
    #mobile-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; max-height: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
    #mobile-menu[style*="600px"] { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: calc(100svh - 90px) !important; overflow-y: auto !important; border: 1px solid rgba(255,255,255,.1) !important; background: rgba(7,14,22,.98) !important; box-shadow: 0 20px 55px rgba(0,0,0,.5) !important; }
}

@media (max-width: 640px) {
    .about-section { padding: 56px 0 !important; }
    .about-grid { gap: 24px !important; padding-inline: 14px !important; }
    .about-img-wrap { border: 0 !important; border-radius: 14px !important; box-shadow: none !important; background: transparent !important; }
    .about-img-wrap > img { border: 0 !important; border-radius: 14px !important; }
    .floating-socials { right: 50% !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; flex-direction: row !important; transform: translateX(50%); padding: 6px !important; border-radius: 999px; background: rgba(8,13,21,.82); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
    .floating-social, .floating-social__inner { width: 40px !important; height: 40px !important; }
    .floating-social::before, .floating-social::after { display: none !important; }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    #bgCanvas, body::after { display: none !important; }
    .d3z-reveal, .d3z-reveal.is-revealed { opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; }
    .service-tile, .price-card, .project-card, .frame-item, .resource-card, .strategy-card, .intel-card, .contact-form-container, .contact-details-container, .about-content, .about-img-wrap { will-change: auto !important; backdrop-filter: none !important; }
    .service-tile:hover, .price-card:hover, .project-card:hover, .resource-card:hover, .strategy-card:hover, .intel-card:hover, .about-img-wrap:hover > img, .frame-item:hover img, .project-card:hover .project-image-placeholder img { transform: none !important; }
}

/* Mobile navigation and viewport correction */
@media (max-width: 1120px) {
    .header {
        inset: 0 0 auto auto !important;
        left: auto !important;
        right: 0 !important;
        width: 82px !important;
        height: 72px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        pointer-events: none;
    }

    .header::before { display: none !important; content: none !important; }

    .menu-toggle {
        display: grid !important;
        place-items: center !important;
        position: fixed !important;
        top: calc(14px + env(safe-area-inset-top)) !important;
        right: 16px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        transform: none !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        background: rgba(9,15,24,.9) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.38) !important;
        backdrop-filter: blur(16px);
        pointer-events: auto;
    }

    #mobile-menu {
        top: calc(74px + env(safe-area-inset-top)) !important;
        max-height: 0;
        pointer-events: auto;
    }

    .hero {
        min-height: 100svh !important;
        padding: calc(88px + env(safe-area-inset-top)) 18px 68px !important;
        justify-content: center !important;
    }

    .container { padding-top: calc(94px + env(safe-area-inset-top)) !important; }
}

.about-grid,
.about-grid.d3z-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.about-img-wrap,
.about-content {
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 640px) {
    .hero .logo-effect-wrapper {
        width: clamp(142px, 45vw, 180px) !important;
        height: clamp(142px, 45vw, 180px) !important;
        margin-bottom: 30px !important;
        border-radius: 24px !important;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(2.75rem, 14.5vw, 4.25rem) !important;
        letter-spacing: -.055em !important;
        overflow-wrap: normal !important;
        white-space: nowrap;
    }

    .hero .tagline {
        max-width: 34rem !important;
        margin-top: 26px !important;
        font-size: clamp(.72rem, 3.2vw, .86rem) !important;
        line-height: 1.85 !important;
        letter-spacing: .09em !important;
    }

    .hero .cta-button { width: min(100%, 330px); padding: 15px 22px !important; }

    .floating-socials {
        right: 10px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
    }

    .floating-social {
        width: 46px !important;
        height: 46px !important;
    }

    .floating-social svg { width: 21px !important; height: 21px !important; }

    .section-title,
    h2.section-title { margin-top: 52px !important; font-size: 1.35rem !important; }

    .notice-card { padding: 28px 18px 22px !important; border-radius: 20px !important; }
    .notice-card h2 { margin-inline: 28px !important; font-size: 1.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .about-img-wrap > img,
    .owner-overlay,
    .frame-item img,
    .project-image-placeholder img,
    .cta-button::after,
    .section-button::after,
    .project-link-button::after,
    .submit-button::after { transition: none !important; transform: none !important; }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(520px circle at var(--pointer-x, 50%) var(--pointer-y, 20%), rgba(255, 51, 51, 0.095), transparent 68%);
}

::selection { background: rgba(255, 51, 51, 0.78); color: #fff; }

.d3z-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2,.75,.2,1) var(--reveal-delay, 0ms); }
.d3z-reveal.is-revealed { opacity: 1; transform: translateY(0); }

.notice-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(3,5,9,.78); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.notice-overlay.is-visible { opacity: 1; visibility: visible; }
.notice-card { position: relative; width: min(560px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(20,29,42,.98), rgba(8,13,21,.98)); border: 1px solid rgba(255,51,51,.52); box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 45px rgba(255,51,51,.14); }
.notice-card h2 { margin: 0 34px 14px; color: #fff; font-family: Montserrat,sans-serif; text-transform: uppercase; }
.notice-card p { white-space: pre-line; color: var(--ui-text-soft); margin: 0 0 22px; }
.notice-image { display: block; width: 100%; aspect-ratio: 16 / 5; object-fit: cover; object-position: center; border-radius: 16px; margin: 0 0 20px; background: #080c12; }
.notice-close { position: absolute; top: 11px; right: 13px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; font-size: 1.6rem; cursor: pointer; }
.notice-close:hover { background: rgba(255,51,51,.22); }
.notice-timer { display: block; color: var(--ui-text-soft); font-size: .75rem; margin-top: 14px; }

.hero h1, .section-header h1 {
    background: linear-gradient(105deg, #fff 12%, #ff737a 45%, #ff3333 70%, #fff 96%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: d3z-title-flow 7s linear infinite;
}

@keyframes d3z-title-flow { to { background-position: 220% center; } }

.project-card::before, .price-card::before, .service-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, var(--ui-accent), transparent);
    opacity: .5;
}

.project-card, .price-card, .service-tile { position: relative; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .d3z-reveal { opacity: 1; transform: none; transition: none; }
    body::after { display: none; }
}

*,
*::before,
*::after {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

a,
button,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

#bgCanvas {
    opacity: 0.12 !important;
}

.header {
    padding: 10px 24px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: 0 !important;
    height: 82px !important;
}

.header::before {
    content: "";
    position: absolute;
    inset: 10px 24px 6px;
    border-radius: 999px;
    background: rgba(7, 14, 22, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(18px);
}

.navbar {
    position: relative;
    z-index: 1;
    width: min(1540px, calc(100% - 32px));
    justify-content: center !important;
    gap: clamp(12px, 1.45vw, 24px) !important;
    flex-wrap: nowrap !important;
    padding: 12px 20px;
}

.nav-link {
    position: relative;
    border-bottom: 0 !important;
    padding: 6px 0 !important;
    color: rgba(237, 242, 248, 0.82) !important;
    font-size: clamp(.66rem, .7vw, .78rem) !important;
    letter-spacing: 0.11em !important;
    white-space: nowrap;
}

.admin-avatar { flex: 0 0 36px; width: 36px !important; height: 36px !important; }

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
    background: linear-gradient(90deg, var(--ui-accent), rgba(255, 255, 255, 0.85));
}

.nav-link:hover,
.nav-link.active {
    color: #fff !important;
    text-shadow: none !important;
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.menu-toggle {
    position: absolute !important;
    right: 42px !important;
    top: 32px !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    width: 46px;
    height: 46px;
    display: none;
    place-items: center;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    line-height: 1;
}

#mobile-menu {
    top: 84px !important;
    left: 16px !important;
    width: calc(100% - 32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    background: rgba(7, 14, 22, 0.97) !important;
    backdrop-filter: blur(18px);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
    z-index: 95 !important;
}

#mobile-menu a {
    padding: 16px 20px !important;
    text-align: left;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em;
}

.container {
    width: var(--ui-container);
    max-width: 1240px !important;
    padding: 150px 0 96px !important;
}

.hero {
    min-height: 100svh !important;
    padding: 124px 20px 82px !important;
    gap: 0;
}

.hero .logo-effect-wrapper {
    width: clamp(170px, 14vw, 230px) !important;
    height: clamp(170px, 14vw, 230px) !important;
    margin-bottom: 28px !important;
    border-width: 3px !important;
    border-radius: 28px !important;
}

.hero h1 {
    font-size: clamp(3.5rem, 7vw, 6.5rem) !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
    margin-top: 0 !important;
}

.hero .tagline {
    max-width: 780px !important;
    margin: 28px auto 0 !important;
    font-size: clamp(.8rem, 1.3vw, 1.05rem) !important;
    line-height: 1.8 !important;
}

.section-header {
    max-width: 920px;
    margin: 0 auto 58px !important;
}

.section-header h1 {
    color: #fff !important;
    text-shadow: none !important;
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin-bottom: 18px !important;
}

.section-header p {
    max-width: 760px;
    color: var(--ui-text-soft) !important;
    font-size: clamp(1rem, 1.5vw, 1.08rem) !important;
}

.section-title,
h2.section-title {
    color: #fff !important;
    border-bottom: 1px solid var(--ui-border-strong) !important;
    padding-bottom: 14px !important;
    margin: 70px 0 28px !important;
}

.services-grid,
.pricing-grid,
.project-grid,
.modular-grid,
.addon-grid,
.hero-intel-grid,
.strategy-grid,
.resource-grid,
.brand-hero-tags,
.philosophy-grid {
    gap: 22px !important;
}

.services-grid,
.pricing-grid,
.project-grid,
.modular-grid,
.addon-grid,
.hero-intel-grid,
.strategy-grid,
.resource-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.service-tile,
.price-card,
.project-card,
.contact-form-container,
.contact-details-container,
.comparison-wrap,
.addon-item,
.modular-tile,
.detail-item,
.project-image-placeholder,
#product-selection-area,
.resource-card,
.strategy-card,
.intel-card,
.brand-hero-copy,
.philosophy-card,
.tnc-box,
.about-content,
.about-img-wrap,
.project-content {
    background: linear-gradient(180deg, rgba(17, 27, 40, 0.9), rgba(11, 19, 29, 0.94)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(16px);
}

.service-tile,
.price-card,
.project-card,
.contact-form-container,
.contact-details-container,
.comparison-wrap,
.addon-item,
.modular-tile,
.tnc-box,
#product-selection-area,
.resource-card,
.strategy-card,
.intel-card,
.brand-hero-copy,
.philosophy-card {
    border-radius: var(--ui-radius) !important;
}

.service-tile,
.price-card,
.project-card,
.addon-item,
.modular-tile,
.project-card,
.detail-item,
.cta-button,
.submit-button,
.section-button,
.project-link,
.cta {
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease;
}

.service-tile:hover,
.price-card:hover,
.project-card:hover,
.addon-item:hover,
.modular-tile:hover,
.detail-item:hover {
    transform: translateY(-6px);
    border-color: var(--ui-border-strong) !important;
    box-shadow: 0 26px 74px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 77, 87, 0.1) !important;
}

.service-tile,
.project-card,
.price-card,
.addon-item,
.modular-tile,
.detail-item,
.resource-card,
.strategy-card,
.intel-card,
.philosophy-card {
    overflow: hidden;
}

.service-tile,
.price-card,
.project-content,
.contact-form-container,
.contact-details-container,
.addon-item,
.modular-tile,
.resource-card,
.strategy-card,
.intel-card,
.brand-hero-copy,
.philosophy-card {
    padding: 28px !important;
}

.services-grid { width: var(--ui-container); }

.project-content {
    gap: 12px;
}

.project-content p,
.service-tile p,
.price-card p,
.comparison-wrap p,
.addon-item p,
.contact-details-container p,
.detail-item p,
.about-content p,
.philosophy-card p,
.strategy-card p,
.resource-card p,
.intel-card p {
    color: var(--ui-text-soft) !important;
}

.project-content h3,
.price-card .tier-name,
.service-tile h3,
.contact-form-container h2,
.contact-details-container h2,
.about-content h2,
.project-tag,
.section-header h1,
.section-title,
.philosophy-card strong,
.brand-hero-copy h2 {
    overflow-wrap: anywhere;
}

.price-card .tier-name,
.service-tile h3,
.project-content h3,
.section-title,
.contact-form-container h2,
.contact-details-container h2,
.about-content h2 {
    color: #fff !important;
}

.price-card .target-audience,
.project-tag,
.marketing-badge,
.resource-card span,
.strategy-card span,
.intel-card span,
.brand-hero-tags span,
.philosophy-card span {
    color: #ffd1d4 !important;
    background: rgba(255, 77, 87, 0.1);
    border: 1px solid rgba(255, 77, 87, 0.2);
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.price-card .price-tag,
.modular-tile .price-range,
.addon-price,
.intel-card strong {
    color: #fff !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    line-height: 1.05;
}

.price-card .price-tag span {
    color: var(--ui-text-soft) !important;
}

.price-card .features-list li,
.comparison-table td,
.comparison-table th,
.tnc-box p,
.tnc-box h3,
.contact-details-container,
.detail-item,
.product-item,
.project-card,
.frames-collage,
.frame-item,
.section-button-container a,
.brand-hero-copy,
.philosophy-card,
.resource-card,
.strategy-card,
.intel-card {
    overflow-wrap: anywhere;
}

.price-card .features-list li,
.product-item,
.detail-item {
    gap: 12px;
    padding: 12px 0;
}

.price-card .features-list li::before {
    color: var(--ui-success) !important;
    flex: 0 0 auto;
}

.comparison-wrap {
    padding: 28px !important;
    overflow-x: auto;
}

.comparison-table {
    min-width: 720px;
}

.comparison-table th {
    color: #fff !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.14em;
}

.comparison-table td {
    color: var(--ui-text-soft) !important;
}

.comparison-table .highlight {
    color: #fff !important;
}

.about-grid,
.contact-layout,
.brand-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.about-img-wrap,
.brand-hero-visual,
.project-image-placeholder {
    border-radius: var(--ui-radius) !important;
    overflow: hidden;
}

.owner-overlay {
    background: linear-gradient(180deg, transparent, rgba(7, 12, 18, 0.94)) !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(6, 12, 20, 0.76) !important;
    color: #fff !important;
    padding: 15px 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

input::placeholder,
textarea::placeholder {
    color: #91a0b3;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(255, 77, 87, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(255, 77, 87, 0.12) !important;
}

textarea {
    min-height: 140px;
}

.submit-button,
.cta-button,
.section-button,
.project-link,
.cta {
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-strong)) !important;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(255, 46, 57, 0.22);
}

.submit-button:hover,
.cta-button:hover,
.section-button:hover,
.project-link:hover,
.cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(255, 46, 57, 0.28);
}

.product-item {
    align-items: flex-start !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.product-item input[type="checkbox"] {
    margin-top: 3px;
}

#product-selection-area,
.tnc-box {
    padding: 24px !important;
}

.tnc-box {
    border-radius: 20px !important;
    max-height: 320px;
}

#checkout-wrapper {
    max-width: 100% !important;
}

#swipe-slider {
    overflow: hidden;
    border-radius: 999px !important;
    border-color: rgba(255, 77, 87, 0.48) !important;
    background: rgba(9, 15, 24, 0.9) !important;
}

#slider-handle {
    box-shadow: 0 10px 20px rgba(255, 77, 87, 0.3);
}

.contact-details-container,
.contact-form-container {
    text-align: left !important;
}

.contact-form-container h2,
.contact-details-container h2,
label {
    text-align: left !important;
}

.detail-item {
    align-items: flex-start !important;
    margin-bottom: 14px;
    padding: 18px !important;
    border-radius: 18px;
}

.detail-item svg {
    flex: 0 0 22px;
    margin-top: 2px;
}

.project-grid,
.frames-collage {
    margin-bottom: 24px;
}

.frames-collage {
    columns: 3 260px !important;
    column-gap: 18px !important;
}

.frame-item {
    break-inside: avoid;
    margin-bottom: 18px !important;
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 27, 40, 0.9);
    box-shadow: var(--ui-shadow);
}

.section-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.section-button {
    width: auto !important;
    min-width: 220px;
}

.footer {
    margin-top: 36px;
    padding: 52px 20px 36px !important;
    background: linear-gradient(180deg, rgba(9, 15, 24, 0.75), rgba(8, 12, 19, 0.96)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer h3 {
    color: #fff !important;
    letter-spacing: 0.12em !important;
}

.social-links {
    gap: 14px !important;
    flex-wrap: wrap;
}

.social-links a {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}

.social-links a:hover {
    background: rgba(255, 77, 87, 0.12) !important;
}

.social-links svg {
    fill: var(--ui-accent) !important;
    filter: none !important;
}

.footer-bottom {
    color: var(--ui-text-soft) !important;
}

.floating-yt {
    right: 16px !important;
    bottom: 16px !important;
}

@media (max-width: 1380px) {
    .navbar {
        gap: 12px !important;
        padding-inline: 14px;
    }

    .nav-link {
        font-size: 0.66rem !important;
        letter-spacing: .07em !important;
    }
}

@media (max-width: 1120px) {
    .header {
        padding: 12px 16px !important;
    }

    .header::before {
        inset: 10px 16px 0;
    }

    .navbar {
        display: none !important;
    }

    .menu-toggle {
        display: grid !important;
        right: 28px !important;
        top: 31px !important;
    }

    .container {
        width: min(100% - 24px, 1240px);
        padding-top: 128px !important;
        padding-bottom: 78px !important;
    }

    .hero { padding-top: 112px !important; }

    .about-grid,
    .contact-layout,
    .brand-hero {
        grid-template-columns: 1fr !important;
    }

    .project-grid,
    .pricing-grid,
    .services-grid,
    .modular-grid,
    .addon-grid {
        grid-template-columns: 1fr !important;
    }

    .comparison-wrap {
        padding: 18px !important;
    }

    .frames-collage {
        columns: 2 180px !important;
    }
}

@media (max-width: 640px) {
    .header::before {
        border-radius: 24px;
        inset: 10px 12px 0;
    }

    .menu-toggle {
        right: 22px !important;
        width: 42px;
        height: 42px;
    }

    #mobile-menu {
        top: 76px !important;
        left: 12px !important;
        width: calc(100% - 24px) !important;
    }

    .container {
        width: min(100% - 20px, 1240px);
        padding-top: 116px !important;
    }

    .hero { min-height: auto !important; padding: 112px 18px 72px !important; }
    .hero .logo-effect-wrapper { width: 150px !important; height: 150px !important; margin-bottom: 24px !important; }
    .hero h1 { font-size: clamp(2.8rem, 16vw, 4.5rem) !important; }
    .hero .tagline { margin-top: 22px !important; font-size: .78rem !important; letter-spacing: .1em !important; }

    .section-header {
        margin-bottom: 42px !important;
    }

    .section-header h1 {
        font-size: clamp(2rem, 10vw, 2.9rem) !important;
    }

    .service-tile,
    .price-card,
    .project-content,
    .contact-form-container,
    .contact-details-container,
    .addon-item,
    .modular-tile,
    .resource-card,
    .strategy-card,
    .intel-card,
    .brand-hero-copy,
    .philosophy-card,
    .comparison-wrap,
    .tnc-box,
    #product-selection-area {
        padding: 20px !important;
    }

    .price-card .price-tag,
    .modular-tile .price-range,
    .addon-price,
    .intel-card strong {
        font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
    }

    .comparison-table {
        min-width: 620px;
    }

    .frames-collage {
        columns: 1 !important;
    }

    .section-button {
        width: 100% !important;
        min-width: 0;
    }

    .floating-yt {
        width: 52px !important;
        height: 52px !important;
    }
}

/* Final cascade normalization */
.container { width: min(1240px, calc(100% - 40px)) !important; max-width: 1240px !important; margin-inline: auto !important; padding: 132px 0 96px !important; }
.container > h2:not(.section-title) { margin: 68px auto 28px !important; text-align: center !important; }
.section-header { max-width: 900px !important; margin: 0 auto 64px !important; padding-inline: 16px; text-align: center !important; }
.pricing-grid, .project-grid, .services-grid, .modular-grid, .addon-grid, .strategy-grid, .resource-grid { width: 100% !important; align-items: stretch !important; margin-inline: auto !important; margin-bottom: 64px !important; gap: 22px !important; }
.price-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 100%; padding: 30px 28px 26px !important; text-align: left !important; }
.price-card.popular::before, .price-card.popular::after, .project-card::before, .price-card::before, .service-tile::before { display: none !important; content: none !important; }
.price-card.popular { border-color: rgba(255,77,87,.34) !important; box-shadow: var(--ui-shadow), inset 0 2px 0 rgba(255,77,87,.72) !important; }
.price-card .tier-name { min-height: 3.1em; margin: 0 0 16px !important; font-size: clamp(1.05rem,1.25vw,1.28rem) !important; line-height: 1.42 !important; text-align: left !important; }
.price-card .target-audience { display: flex !important; width: 100% !important; min-height: 52px; justify-content: flex-start !important; margin: 0 0 18px !important; padding: 10px 13px !important; border-radius: 14px !important; line-height: 1.5 !important; text-align: left !important; }
.price-card .price-tag[aria-hidden="true"] { display: none !important; }
.price-card .price-tag:not([aria-hidden="true"]) { margin: 4px 0 20px !important; justify-content: flex-start !important; }
.price-card .disclaimer { min-height: 42px; margin: 0 0 14px !important; color: var(--ui-text-soft) !important; font-size: .76rem !important; line-height: 1.5 !important; text-align: left !important; }
.price-card .features-list { width: 100%; margin: 0 0 24px !important; padding: 0 !important; flex: 1 1 auto; text-align: left !important; }
.price-card .features-list li { position: relative; width: 100%; min-height: 46px; align-items: flex-start !important; padding: 12px 0 12px 28px !important; line-height: 1.5 !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; }
.price-card .features-list li::before { position: absolute; left: 2px; top: 12px; margin: 0 !important; }
.price-card > .cta-button { width: 100% !important; margin-top: auto !important; padding: 14px 16px !important; text-align: center !important; }
.project-card { height: 100%; }
.project-content { display: flex !important; flex-direction: column; height: 100%; text-align: left !important; }
.project-content .project-link-button, .project-content .project-link { margin-top: auto; align-self: flex-start; }
.comparison-wrap, .tnc-section, .contact-layout, .about-grid { width: 100% !important; margin-inline: auto !important; }

@media (max-width: 640px) {
    .container { width: min(100% - 24px, 1240px) !important; padding-top: 112px !important; }
    .price-card { padding: 22px 20px !important; }
    .price-card .tier-name, .price-card .target-audience, .price-card .disclaimer { min-height: 0; }
}

.about-grid { align-items: center !important; gap: clamp(28px,4vw,54px) !important; }
.about-img-wrap { position: relative !important; width: 100%; max-width: 560px; aspect-ratio: 4/5; align-self: center; overflow: hidden !important; border-radius: 26px !important; isolation: isolate; }
.about-img-wrap > img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; filter: saturate(.88) contrast(1.03) !important; transition: transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease !important; }
.owner-overlay { position: absolute !important; inset: auto 0 0 !important; width: 100% !important; padding: 64px 22px 20px !important; text-align: center !important; background: linear-gradient(180deg,transparent 0%,rgba(3,7,12,.78) 42%,rgba(3,7,12,.98) 100%) !important; border-top: 0 !important; z-index: 2; transition: padding .35s ease,background .35s ease !important; }
.owner-overlay h3 { margin: 0 0 4px !important; color: #fff !important; font-family: Montserrat,sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: .04em; text-shadow: 0 2px 14px rgba(0,0,0,.95) !important; }
.owner-overlay p { margin: 0 !important; color: rgba(237,242,248,.82) !important; font-size: .78rem !important; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.about-img-wrap:hover > img { transform: scale(1.045); filter: saturate(1) contrast(1.06) !important; }
.about-img-wrap:hover .owner-overlay { padding-bottom: 27px !important; }
.about-content { align-self: center !important; height: auto !important; min-height: 0 !important; padding: clamp(30px,4vw,48px) !important; border-radius: 26px !important; }
.about-content h2 { margin: 0 0 24px !important; line-height: 1.1 !important; }
.about-content p { max-width: 68ch; margin: 0 0 16px !important; line-height: 1.75 !important; }
.service-tile:hover,.price-card:hover,.project-card:hover,.resource-card:hover,.strategy-card:hover,.intel-card:hover { transform: translateY(-7px) !important; border-color: rgba(255,77,87,.38) !important; box-shadow: 0 26px 70px rgba(0,0,0,.46),0 0 0 1px rgba(255,77,87,.08) !important; }
.frame-item img,.project-image-placeholder img { transition: transform .65s cubic-bezier(.2,.7,.2,1),filter .4s ease !important; }
.frame-item:hover img,.project-card:hover .project-image-placeholder img { transform: scale(1.035); filter: saturate(1.06); }

@media (max-width: 900px) {
    .about-img-wrap { max-width: 520px; margin-inline: auto; }
    .about-content { max-width: 680px; margin-inline: auto; }
}