:root {
    --ink: #172033;
    --muted: #617086;
    --orange: #f97316;
    --orange-dark: #e85f05;
    --navy: #09111f;
    --navy-2: #132238;
    --gold: #f7b733;
    --green: #168a6a;
    --blue: #246bfe;
    --line: #e7ecf2;
    --soft: #f7f9fc;
    --container: 1380px;
    --topline-height: 48px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    font-family: "Instrument Sans", Arial, sans-serif;
    background: #fff;
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }

.topbar {
    position: static;
    z-index: auto;
    padding-top: 0;
    background: #fff;
}
.topline {
    position: static;
    top: 0;
    left: 0;
    right: 0;
    z-index: auto;
    height: var(--topline-height);
    padding: 0;
    color: #fff;
    background: #ff5b00;
    font-size: 16px;
    font-weight: 700;
}
.topline-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding-left: max(20px, calc((100vw - var(--container)) / 2));
}
.top-contact {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: var(--topline-height);
}
.top-contact span,
.top-contact a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.top-contact span::before {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.top-contact a[href^="tel"]::before {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.top-contact a[href^="mailto"]::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.top-social {
    display: flex;
    margin-left: auto;
}
.top-social a {
    width: 44px;
    min-height: var(--topline-height);
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
}
.top-social a:last-child {
    border-right: 1px solid rgba(255,255,255,.35);
}
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
    min-height: 86px;
    margin: 0;
    padding: 14px max(20px, calc((100vw - var(--container)) / 2));
    background: #fff;
    box-shadow: 0 2px 8px rgba(23,32,51,.06);
    border-bottom: 1px solid var(--line);
}
.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
.brand img {
    width: clamp(220px, 20vw, 300px);
    height: 74px;
    object-fit: contain;
    object-position: left center;
}
.nav-toggle {
    display: none;
    width: 46px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    place-items: center;
    padding: 10px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}
.nav-toggle:hover {
    background: var(--soft);
}
.navlinks {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1vw, 22px);
    color: #1d2430;
    font-size: 15px;
    font-weight: 800;
}
.navlinks a {
    white-space: nowrap;
}
.navlinks a:hover { color: var(--orange); }
.nav-dropdown {
    position: relative;
}
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dropdown-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    z-index: 40;
    min-width: 236px;
    display: grid;
    gap: 0;
    padding: 12px 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(23,32,51,.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}
.dropdown-menu a {
    display: block;
    padding: 12px 26px;
    color: #1d2430;
    font-size: 16px;
    font-weight: 800;
}
.dropdown-menu a:hover {
    color: var(--orange);
    background: #fff7ed;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown:hover .dropdown-toggle,
.nav-dropdown:focus-within .dropdown-toggle {
    color: var(--orange);
}
.navlinks .quote-link {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 0 24px;
    border-radius: 999px;
    color: #fff;
    background: #ff5b00;
}
.navlinks .quote-link:hover {
    color: #fff;
    background: #e65000;
}
.notice {
    max-width: var(--container);
    margin: 16px auto 0;
    padding: 12px 16px;
    color: #064e3b;
    background: #dff8ef;
    border: 1px solid #a8ead7;
    border-radius: 8px;
}

.home-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 56px 20px 18px;
}
.showcase-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 18px 42px rgba(9,17,31,.18);
}
.showcase-card img {
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    opacity: .62;
}
.showcase-card div {
    position: absolute;
    inset: auto 0 0;
    padding: 24px;
    background: linear-gradient(0deg, rgba(9,17,31,.92), rgba(9,17,31,0));
}
.showcase-card h2 {
    max-width: 320px;
    margin-bottom: 12px;
    font-size: 21px;
}
.showcase-card a {
    color: var(--orange);
    font-weight: 800;
}
.call-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 14px 20px;
    color: #fff;
    background: var(--orange);
    font-weight: 800;
}
.call-strip span {
    color: #ffe2cd;
}
.hero {
    min-height: 640px;
    display: grid;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(10,20,38,.86), rgba(10,20,38,.42)),
        url("../site-assets/banner1.webp") center/cover;
    color: #fff;
}
.home-hero {
    position: relative;
    min-height: calc(100vh - 134px);
    background:
        linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.30), rgba(255,255,255,.08)),
        url("../site-assets/banner1.webp") center/cover;
    color: #202020;
}
.hero-copy {
    max-width: 780px;
    padding: 64px 20px;
    margin-left: max(20px, calc((100vw - var(--container)) / 2));
}
.home-hero .hero-copy {
    width: min(100%, 980px);
    max-width: none;
    margin: 0 auto;
    padding: 120px 20px 150px;
    text-align: center;
}
.home-hero h1 {
    max-width: 950px;
    margin: 0 auto 34px;
    color: #202020;
    font-size: clamp(42px, 4.1vw, 62px);
    font-weight: 800;
    line-height: 1.18;
}
.home-hero .actions { justify-content: center; margin-top: 0; }
.home-hero .button {
    min-width: 192px;
    min-height: 48px;
    border-radius: 999px;
    background: #ff5b00;
}
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    color: #8d9299;
    font-size: 24px;
    transform: translateY(-50%);
}
.hero-arrow-left { left: 22px; }
.hero-arrow-right { right: 22px; }
.eyebrow {
    margin: 0 0 10px;
    color: var(--orange);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}
h1, h2, h3 { line-height: 1.12; margin: 0 0 16px; }
h1 { font-size: clamp(42px, 7vw, 78px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: 22px; }
p { margin: 0 0 18px; color: inherit; }
.hero p:not(.eyebrow) { font-size: 20px; max-width: 680px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.button, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}
.primary, button { color: #fff; background: var(--orange); }
.primary:hover, button:hover { background: var(--orange-dark); }
.ghost { color: #fff; border: 1px solid rgba(255,255,255,.45); }

.split, .page-hero, .section, .band, .form-section, .footer {
    max-width: var(--container);
    margin: 0 auto;
    padding: 76px 20px;
}
.about-home {
    align-items: start;
}
.about-media .eyebrow {
    margin-bottom: 18px;
}
.about-copy {
    padding-top: 36px;
}
.split, .page-hero, .form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}
.split img, .page-hero img, .project img {
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.page-hero.compact {
    grid-template-columns: 1fr;
    max-width: 860px;
    text-align: center;
}
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.home-stats {
    margin-top: 28px;
}
.stats strong {
    padding: 18px;
    border-left: 4px solid var(--orange);
    background: var(--soft);
    font-size: 30px;
}
.stats span {
    display: block;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}
.stats small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}
.section-head {
    max-width: 760px;
    margin-bottom: 30px;
}
.expertise-home {
    max-width: none;
    padding-left: max(20px, calc((100vw - var(--container)) / 2));
    padding-right: max(20px, calc((100vw - var(--container)) / 2));
    background: #f7f9fc;
}
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.expertise-card {
    position: relative;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 24px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(9,17,31,.50), rgba(9,17,31,.94)),
        url("../site-assets/design.png") center/cover;
    box-shadow: 0 18px 42px rgba(23,32,51,.14);
}
.expertise-card:nth-child(2n) {
    background-image:
        linear-gradient(180deg, rgba(9,17,31,.50), rgba(9,17,31,.94)),
        url("../site-assets/custom.png");
}
.expertise-card:nth-child(3n) {
    background-image:
        linear-gradient(180deg, rgba(9,17,31,.50), rgba(9,17,31,.94)),
        url("../site-assets/blog.webp");
}
.expertise-card span {
    color: var(--orange);
    font-size: 28px;
    font-weight: 800;
}
.expertise-card p {
    color: #dbe4f0;
}
.grid, .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.card, .project, .contact-card, .lead-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(23,32,51,.08);
}
.card { padding: 26px; }
.card span { color: var(--orange); font-weight: 800; }
.card p, .service-list p, .prose p, .footer p { color: var(--muted); }
.band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    max-width: none;
    padding-left: max(20px, calc((100vw - var(--container)) / 2));
    padding-right: max(20px, calc((100vw - var(--container)) / 2));
    background: var(--navy-2);
    color: #fff;
}
.why-home {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 44px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 76px 20px;
}
.why-intro {
    position: sticky;
    top: 130px;
    align-self: start;
}
.why-list {
    display: grid;
    gap: 18px;
}
.why-list article {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px 18px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(23,32,51,.08);
}
.why-list span {
    grid-row: span 3;
    color: var(--orange);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}
.why-list p {
    color: var(--muted);
}
.why-list a {
    color: var(--orange);
    font-weight: 800;
}
.tech-home {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 34px;
    max-width: none;
    padding: 76px max(20px, calc((100vw - var(--container)) / 2));
    color: #fff;
    background: var(--navy);
}
.tech-copy p:not(.eyebrow) {
    color: #c8d3e1;
}
.tech-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.tech-list a {
    display: grid;
    gap: 4px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
}
.tech-list strong {
    color: #fff;
}
.tech-list span {
    color: #aebbc9;
    font-size: 14px;
}
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.chips a {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--soft);
    font-weight: 700;
}
.project { overflow: hidden; }
.portfolio-home {
    background: #fff;
}
.project div { padding: 20px; }
.portfolio-hero {
    position: relative;
    min-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
    align-items: center;
    gap: 42px;
    overflow: hidden;
    padding: 70px max(20px, calc((100vw - var(--container)) / 2));
    background:
        linear-gradient(115deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 48%, rgba(9,17,31,.08) 48%, rgba(9,17,31,.04) 100%),
        url("../site-assets/banner2.webp") center/cover;
}
.portfolio-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    top: -80px;
    width: 48vw;
    height: 120%;
    background: linear-gradient(135deg, rgba(0,91,153,.92), rgba(0,168,255,.54));
    clip-path: polygon(34% 0, 100% 0, 68% 100%, 0 100%);
    pointer-events: none;
}
.portfolio-hero-media {
    position: relative;
    z-index: 1;
    min-height: 470px;
}
.portfolio-hero-media img {
    width: min(100%, 700px);
    height: 520px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(23,32,51,.18);
}
.portfolio-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 740px;
    text-align: center;
}
.portfolio-hero-copy h1 {
    color: #202020;
    font-size: clamp(42px, 4.2vw, 68px);
}
.portfolio-hero-copy p:not(.eyebrow) {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    color: #344154;
    font-size: 20px;
}
.portfolio-hero-copy .actions {
    justify-content: center;
}
.portfolio-ghost {
    color: var(--ink);
    border: 1px solid var(--line);
    background: #fff;
}
.portfolio-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 42px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 74px 20px 28px;
}
.portfolio-intro p:not(.eyebrow) {
    color: var(--muted);
    font-size: 18px;
}
.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px 34px;
}
.portfolio-filters span {
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--soft);
    font-weight: 800;
}
.portfolio-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 10px 20px 76px;
}
.portfolio-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(23,32,51,.09);
}
.portfolio-image {
    display: block;
    background: var(--soft);
}
.portfolio-card img {
    height: 250px;
    object-fit: cover;
    transition: transform .28s ease;
}
.portfolio-card:hover img {
    transform: scale(1.04);
}
.portfolio-card div {
    display: grid;
    gap: 10px;
    padding: 24px;
}
.portfolio-card span {
    color: var(--orange);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.portfolio-card h3 {
    margin: 0;
}
.portfolio-card p {
    color: var(--muted);
}
.portfolio-card div > a {
    color: var(--orange);
    font-weight: 900;
}
.portfolio-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: none;
    padding: 68px max(20px, calc((100vw - var(--container)) / 2));
    color: #fff;
    background: var(--navy);
}
.portfolio-process div {
    padding: 24px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
}
.portfolio-process span {
    color: var(--orange);
    font-size: 30px;
    font-weight: 900;
}
.portfolio-process strong {
    display: block;
    margin: 10px 0;
    font-size: 24px;
}
.portfolio-process p {
    color: #c8d3e1;
}
.portfolio-cta {
    background: #ff5b00;
}
.portfolio-cta .eyebrow {
    color: #fff2e8;
}
.service-list {
    display: grid;
    gap: 18px;
}
.service-list article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}
.service-list span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--green);
    border-radius: 50%;
    font-weight: 800;
}
.prose {
    max-width: 920px;
    display: grid;
    gap: 22px;
}
.wp-article {
    max-width: 980px;
    margin: 0 auto;
    padding: 78px 20px;
}
.wp-article h1 {
    max-width: 860px;
}
.wp-meta {
    color: var(--muted);
    font-weight: 700;
}
.wp-content {
    margin-top: 34px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.76;
}
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
    margin-top: 34px;
}
.wp-content p,
.wp-content ul,
.wp-content ol,
.wp-content figure,
.wp-content blockquote {
    margin-bottom: 20px;
}
.wp-content ul,
.wp-content ol {
    padding-left: 24px;
}
.wp-content ul { list-style: disc; }
.wp-content ol { list-style: decimal; }
.wp-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.wp-content a {
    color: var(--orange);
    font-weight: 800;
}
.pagination-wrap {
    padding-top: 0;
}
.pagination-wrap nav {
    display: flex;
    justify-content: center;
}
.form-section.solo { grid-template-columns: 1fr; max-width: 720px; }
.contact-card, .lead-form { padding: 28px; }
.lead-form {
    display: grid;
    gap: 16px;
}
label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}
input, textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ced7e3;
    border-radius: 8px;
    font: inherit;
}
.error { color: #b42318; margin: 0; }
.footer {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) 1fr .9fr minmax(280px, 1fr);
    gap: clamp(34px, 4vw, 74px);
    max-width: none;
    padding: 86px max(24px, calc((100vw - var(--container)) / 2)) 78px;
    background:
        radial-gradient(circle at 8% 18%, rgba(255,91,0,.16), transparent 28%),
        linear-gradient(135deg, #06101f 0%, #0b1424 48%, #07111f 100%);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer h2,
.footer h3 {
    margin-bottom: 26px;
    color: #fff;
}
.footer h3 {
    position: relative;
    padding-bottom: 14px;
    font-size: 23px;
}
.footer h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff5b00, #00a8ff);
}
.footer h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    width: min(100%, 360px);
    margin-bottom: 26px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.footer-brand img {
    width: 100%;
    height: 92px;
    object-fit: contain;
    object-position: left center;
}
.footer h2 strong,
.copyright span {
    color: #ff5b00;
}
.footer-logo-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #ff5b00;
    font-size: 18px;
    font-weight: 900;
}
.footer p {
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.72;
}
.footer-about p {
    max-width: 390px;
}
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.footer-social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.06);
    font-weight: 900;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.footer-social a:hover {
    border-color: rgba(255,91,0,.55);
    background: #ff5b00;
    transform: translateY(-2px);
}
.footer-address {
    display: grid;
    align-content: start;
}
.footer-address p {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 14px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.84);
}
.footer-address p span {
    color: #ff8b3d;
    font-size: 12px;
    line-height: 2.3;
}
.footer-links {
    display: grid;
    align-content: start;
    gap: 14px;
}
.footer-links h3 {
    margin-bottom: 20px;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    transition: color .2s ease, transform .2s ease;
}
.footer-links a::before {
    content: "›";
    color: #ff8b3d;
    font-size: 28px;
    font-weight: 300;
    line-height: .6;
}
.footer-links a:hover {
    color: #fff;
    transform: translateX(4px);
}
.newsletter {
    display: grid;
    gap: 16px;
    align-content: start;
}
.newsletter h3 {
    margin-bottom: 20px;
}
.newsletter p {
    margin-bottom: 10px;
}
.newsletter input {
    max-width: 340px;
    min-height: 54px;
    border-color: rgba(255,255,255,.16);
    border-radius: 8px;
    color: #fff;
    background: rgba(255,255,255,.08);
    outline: none;
}
.newsletter input::placeholder {
    color: rgba(255,255,255,.56);
}
.newsletter input:focus {
    border-color: rgba(255,91,0,.75);
    box-shadow: 0 0 0 3px rgba(255,91,0,.16);
}
.newsletter button {
    justify-self: start;
    min-height: 48px;
    margin-top: 4px;
    padding: 0 24px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ff6a00, #f04405);
    box-shadow: 0 14px 30px rgba(255,91,0,.26);
}
.newsletter button:hover {
    color: #fff;
    background: linear-gradient(135deg, #ff7a1a, #e65000);
}
.copyright {
    padding: 22px 20px;
    text-align: center;
    color: rgba(255,255,255,.72);
    background: #050b15;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 15px;
}

.premium-hero {
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(420px, .82fr);
    gap: 52px;
    align-items: center;
    min-height: calc(100vh - 134px);
    padding: 82px max(20px, calc((100vw - var(--container)) / 2)) 64px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(249, 115, 22, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 15% 80%, rgba(36, 107, 254, 0.04) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255,247,237,.94), rgba(255,255,255,.98) 42%, rgba(237,246,255,.92));
}
.premium-hero-copy {
    max-width: 780px;
}
.premium-hero-copy > .eyebrow {
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 900;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.premium-hero h1 {
    max-width: 780px;
    color: #0a0e27;
    font-size: clamp(48px, 5.8vw, 88px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 8px rgba(10, 14, 39, 0.08);
}
.premium-hero p:not(.eyebrow) {
    max-width: 690px;
    color: #3d4a5f;
    font-size: 20px;
    line-height: 1.68;
    font-weight: 500;
}
.premium-ghost {
    color: var(--ink);
    border: 1px solid #cfd8e6;
    background: #fff;
}
.premium-ghost:hover {
    color: var(--orange);
    background: #fff7ed;
}
.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.hero-feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
}
.hero-feature-item:hover {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
}
.feature-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}
.hero-feature-item strong {
    font-size: 15px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 6px;
    line-height: 1.2;
}
.hero-feature-item span {
    font-size: 12px;
    color: #5a6f87;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hero-proof strong:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(23, 32, 51, 0.16), inset 0 1px 0 rgba(255,255,255,.8);
}
.premium-hero-panel {
    position: relative;
}

/* Device Mockup with Floating Cards */
.hero-device-mockup {
    position: relative;
    height: clamp(500px, 55vw, 680px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Feature Cards */
.floating-card {
    position: absolute;
    width: 180px;
    padding: 16px 14px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: floatCard 3s ease-in-out infinite;
}

.floating-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-6px);
}

/* Card positioning - overlapping around device */
.floating-card-1 {
    top: -30px;
    left: -20px;
    animation-delay: 0s;
    z-index: 5;
}

.floating-card-2 {
    top: 40%;
    right: -40px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
    z-index: 5;
}

.floating-card-3 {
    bottom: -10px;
    right: 20px;
    animation-delay: 0.4s;
    z-index: 5;
}

.floating-card-4 {
    bottom: 20%;
    left: -30px;
    animation-delay: 0.6s;
    z-index: 5;
}

.card-icon {
    font-size: 28px;
    margin-bottom: 6px;
    display: block;
}

.card-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.floating-card p {
    font-size: 11px;
    color: #5a6f87;
    line-height: 1.35;
    margin: 0;
}

/* Central Device Screen */
.device-screen {
    position: relative;
    width: 400px;
    height: 420px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: 14px solid #000;
    border-radius: 28px;
    padding: 36px 28px;
    box-shadow: 0 48px 120px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10;
    overflow: hidden;
}

.device-screen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: #000;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-screen::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 4px;
    background: #000;
    border-radius: 999px;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.screen-content {
    position: relative;
    z-index: 2;
}

.screen-header {
    font-size: 24px;
    font-weight: 700;
    color: #0a0e27;
    line-height: 1.2;
    margin-bottom: 16px;
}

.screen-text {
    font-size: 14px;
    color: #5a6f87;
    margin-bottom: 24px;
    line-height: 1.5;
}

.screen-button {
    display: inline-block;
    padding: 10px 24px;
    background: var(--orange);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.screen-button:hover {
    background: #ff5b00;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3);
}

/* Floating Animation */
@keyframes floatCard {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.premium-hero {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(620px, .86fr) minmax(760px, 1.14fr);
    gap: clamp(28px, 3vw, 56px);
    padding-top: clamp(58px, 7vw, 92px);
    padding-bottom: clamp(72px, 8vw, 118px);
    padding-left: max(76px, calc((100vw - 1720px) / 2));
    padding-right: max(56px, calc((100vw - 1720px) / 2));
    background:
        radial-gradient(circle at 68% 42%, rgba(116, 186, 255, .28) 0 21%, transparent 48%),
        radial-gradient(circle at 15% 21%, rgba(255, 104, 23, .12) 0 17%, transparent 40%),
        radial-gradient(circle at 78% 78%, rgba(61, 111, 255, .14) 0 20%, transparent 42%),
        linear-gradient(120deg, #fff7f0 0%, #ffffff 43%, #eef7ff 100%);
}
.premium-hero::before {
    content: "";
    position: absolute;
    inset: auto -8% -24% 47%;
    height: 58%;
    z-index: -1;
    background:
        radial-gradient(ellipse at center, rgba(107, 151, 255, .24), transparent 64%);
    transform: rotate(-8deg);
}
.premium-hero-copy {
    position: relative;
    z-index: 3;
}
.premium-hero h1 {
    max-width: 720px;
    margin-bottom: 24px;
    font-size: clamp(54px, 4.65vw, 86px);
    line-height: 1.02;
    letter-spacing: 0;
}
.highlight-orange {
    background: linear-gradient(90deg, #ff5b00, #ff7a1a 45%, #d64bc7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.premium-hero p:not(.eyebrow) {
    max-width: 650px;
    margin-bottom: 0;
    font-size: 19px;
    line-height: 1.62;
}
.premium-hero .actions {
    align-items: center;
    gap: 20px;
    margin-top: 34px;
}
.hero-button {
    min-height: 58px;
    border-radius: 999px;
    padding: 0 16px 0 28px;
    gap: 16px;
}
.hero-button span {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ff5b00;
    background: #fff;
}
.premium-ghost.hero-button span {
    color: #fff;
    background: #0a1533;
}
.hero-features {
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    gap: 18px;
    margin-top: 54px;
}
.hero-feature-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 0;
    border: 0;
    background: transparent;
}
.hero-feature-item:hover {
    background: transparent;
    border-color: transparent;
}
.feature-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 50%;
    font-size: 0;
    font-weight: 900;
}
.feature-icon::before {
    color: inherit;
    font-size: 14px;
    line-height: 1;
}
.hero-feature-item:nth-child(1) .feature-icon { color: #ff5b00; background: #ffe9dd; }
.hero-feature-item:nth-child(1) .feature-icon::before { content: "M"; }
.hero-feature-item:nth-child(2) .feature-icon { color: #2474ff; background: #e2f1ff; }
.hero-feature-item:nth-child(2) .feature-icon::before { content: "S"; }
.hero-feature-item:nth-child(3) .feature-icon { color: #12a96b; background: #def8ed; }
.hero-feature-item:nth-child(3) .feature-icon::before { content: "D"; }
.hero-feature-item:nth-child(4) .feature-icon { color: #7c5cff; background: #eee8ff; }
.hero-feature-item:nth-child(4) .feature-icon::before { content: "24"; }
.feature-copy,
.hero-feature-item strong,
.hero-feature-item span:not(.feature-icon) {
    display: block;
}
.hero-feature-item strong {
    grid-column: 2;
    margin: 0 0 4px;
    font-size: 14px;
}
.hero-feature-item span:not(.feature-icon) {
    grid-column: 2;
    font-size: 12px;
    color: #52627a;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.premium-hero-panel {
    min-width: 0;
}
.hero-device-mockup {
    min-height: clamp(520px, 40vw, 660px);
    height: auto;
}
.hero-orbit {
    position: absolute;
    inset: -2% 2% 3% 5%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 54% 46%, rgba(255,255,255,.72) 0 26%, transparent 27%),
        linear-gradient(135deg, rgba(255, 218, 194, .58), rgba(188, 223, 255, .74));
    box-shadow: inset 0 0 85px rgba(255,255,255,.72), 0 42px 90px rgba(68, 116, 200, .13);
}
.hero-orbit::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 0;
    bottom: 8%;
    height: 28%;
    border-bottom: 4px solid rgba(105, 144, 226, .22);
    border-radius: 50%;
    transform: rotate(-2deg);
}
.hero-dotted {
    position: absolute;
    width: 82px;
    height: 68px;
    background-image: radial-gradient(rgba(255, 109, 41, .22) 2px, transparent 2px);
    background-size: 16px 16px;
}
.hero-dotted-top {
    left: 9%;
    top: 11%;
}
.hero-dotted-bottom {
    right: 3%;
    bottom: 9%;
    background-image: radial-gradient(rgba(75, 126, 255, .2) 2px, transparent 2px);
}
.hero-cube,
.hero-sphere,
.hero-paper-plane {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}
.hero-cube {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8bd8ff 0%, #2978ff 54%, #1c55cc 100%);
    transform: rotate(34deg) skew(-8deg);
    box-shadow: 0 16px 28px rgba(41, 120, 255, .24);
}
.hero-cube-one {
    right: 23%;
    top: 18%;
}
.hero-cube-two {
    left: 22%;
    bottom: 20%;
}
.hero-sphere {
    right: 8%;
    bottom: 24%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd287, #ff5b00 68%);
    box-shadow: 0 16px 30px rgba(255,91,0,.22);
}
.hero-paper-plane {
    right: 1%;
    top: 8%;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 48px solid #8ea6ff;
    transform: rotate(-28deg);
}
.floating-card {
    z-index: 8;
    width: 230px;
    min-height: 116px;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(210, 221, 238, .72);
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 22px 54px rgba(40, 65, 110, .14);
    backdrop-filter: blur(18px);
}
.premium-hero .floating-card p {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.55;
    max-width: none;
    margin: 0;
    color: #5f6f86;
    font-weight: 500;
}
.floating-card-1 { top: 4%; left: 34%; }
.floating-card-2 { top: 43%; left: -3%; right: auto; }
.floating-card-3 { right: 35%; bottom: 7%; }
.floating-card-4 {
    right: -3%;
    bottom: 48%;
    left: auto;
    width: 214px;
}
.card-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 14px;
    font-size: 0;
    font-weight: 900;
}
.floating-card-1 .card-icon { color: #8f54ef; background: #f0e7ff; }
.floating-card-2 .card-icon { color: #1682ff; background: #e7f3ff; }
.floating-card-3 .card-icon { color: #18aa72; background: #e3f8ef; }
.floating-card-4 .card-icon { color: #7058ff; background: #ece9ff; }
.card-icon svg {
    width: 26px;
    height: 26px;
    color: inherit;
    display: block;
}
.card-label {
    align-self: end;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
.device-screen {
    z-index: 5;
    width: min(40vw, 500px);
    height: 306px;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 114px 100px 0 0;
    padding: 66px 34px 34px 76px;
    border: 12px solid #0b0d14;
    border-bottom-width: 18px;
    border-radius: 16px 16px 10px 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(242,247,255,.94)),
        radial-gradient(circle at 75% 56%, rgba(71, 133, 255, .22), transparent 34%);
    box-shadow: 0 34px 84px rgba(14, 28, 54, .28);
    transform: perspective(900px) rotateX(1deg) rotateY(-7deg) rotateZ(1deg);
}
.device-screen::before {
    height: 36px;
    background: #fff;
    border-bottom: 1px solid #e7edf7;
    border-radius: 0;
}
.device-screen::after {
    top: auto;
    left: 50%;
    bottom: -34px;
    width: 76%;
    height: 28px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #222839, #0b0d14);
    transform: translateX(-50%) perspective(240px) rotateX(40deg);
}
.screen-content {
    position: relative;
    z-index: 2;
    max-width: 250px;
    text-align: left;
}
.screen-content::after {
    content: "";
    position: absolute;
    right: -148px;
    top: -6px;
    width: 150px;
    height: 150px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 28%, #ff7a1a 0 12%, transparent 13%),
        linear-gradient(150deg, #cfe3ff 0 50%, #79a7ff 51% 100%);
    box-shadow: 0 18px 40px rgba(44, 96, 190, .18);
}
.screen-header {
    font-size: 22px;
    line-height: 1.18;
}
.premium-hero .screen-text {
    max-width: 210px;
    margin-bottom: 18px;
    color: #6a7890;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
}
.screen-button {
    padding: 9px 20px;
    border-radius: 6px;
    background: #ff5b00;
}
.hero-phone {
    position: absolute;
    right: 13%;
    bottom: 20%;
    z-index: 7;
    width: 132px;
    min-height: 228px;
    padding: 34px 16px 16px;
    border: 8px solid #0b0d14;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 58px rgba(14, 28, 54, .28);
    transform: rotate(7deg);
}
.phone-notch {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 52px;
    height: 10px;
    border-radius: 0 0 9px 9px;
    background: #0b0d14;
    transform: translateX(-50%);
}
.phone-brand {
    width: 24px;
    height: 24px;
    margin-bottom: 16px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #ff5b00;
    background: #fff2ea;
    font-size: 10px;
    font-weight: 900;
}
.hero-phone h3 {
    margin-bottom: 10px;
    color: #07132c;
    font-size: 15px;
    line-height: 1.15;
}
.hero-phone h3::first-line {
    color: #07132c;
}
.premium-hero .hero-phone p {
    margin-bottom: 14px;
    color: #637083;
    font-size: 10px;
    line-height: 1.45;
    max-width: none;
    font-weight: 600;
}
.hero-phone > span {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 6px;
    color: #fff;
    background: #ff5b00;
    font-size: 9px;
    font-weight: 800;
}
.phone-tabs {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.phone-tabs i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #edf1f7;
}

@media (min-width: 1500px) {
    .premium-hero {
        min-height: calc(100vh - 92px);
        align-items: start;
        padding-top: 8px;
    }
    .premium-hero-copy {
        padding-top: 0;
    }
    .premium-hero h1 {
        margin-top: 22px;
        font-size: 82px;
    }
    .premium-hero-panel {
        margin-top: 0;
    }
    .hero-device-mockup {
        min-height: 650px;
    }
}

.premium-hero-panel img {
    height: clamp(420px, 50vw, 620px);
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 24px 72px rgba(23, 32, 51, 0.22), 0 8px 28px rgba(23, 32, 51, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: brightness(1.02);
}
.premium-hero-panel img:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 96px rgba(23, 32, 51, 0.28), 0 12px 36px rgba(23, 32, 51, 0.16);
}
.hero-panel-card {
    position: absolute;
    left: -34px;
    bottom: 34px;
    width: min(360px, 82%);
    padding: 24px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 12px;
    color: #fff;
    background: rgba(9, 17, 31, 0.92);
    box-shadow: 0 32px 72px rgba(9, 17, 31, 0.32), inset 0 1px 0 rgba(255,255,255,.1);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.hero-panel-card:hover {
    background: rgba(9, 17, 31, 0.96);
    box-shadow: 0 40px 84px rgba(9, 17, 31, 0.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.hero-panel-card span {
    display: block;
    margin-bottom: 8px;
    color: #ffb985;
    font-weight: 900;
    text-transform: uppercase;
}
.hero-panel-card strong {
    font-size: 22px;
    line-height: 1.22;
}

/* Trusted Section */
.trusted-section {
    background: #f9fafb;
    padding: 60px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.trusted-container {
    max-width: var(--container);
    margin: 0 auto;
    text-align: center;
}
.trusted-section h3 {
    font-size: 24px;
    font-weight: 700;
    color: #0a0e27;
    margin-bottom: 40px;
}
.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.logo-placeholder {
    font-size: 14px;
    font-weight: 700;
    color: #aeb8c3;
    letter-spacing: 0.05em;
    padding: 0 20px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.logo-placeholder:hover {
    color: var(--orange);
}
.trusted-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.stat-number {
    font-size: 48px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 14px;
    color: #5a6f87;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.brand-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 24px 20px;
    margin: -40px auto 60px;
    max-width: 1100px;
    width: calc(100% - 40px);
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    position: relative;
    z-index: 10;
}
.brand-strip a {
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.brand-strip a:hover {
    transform: translateY(-4px);
}
.brand-strip a:hover span {
    background: linear-gradient(135deg, var(--orange) 0%, #ff8c42 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
}
.brand-strip span {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.4s ease;
}
.premium-section,
.premium-services,
.premium-split,
.premium-process,
.premium-faq,
.premium-cta {
    max-width: var(--container);
    margin: 0 auto;
    padding: 82px 20px;
}
.intro-section {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr);
    gap: 60px;
    align-items: start;
}
.section-kicker {
    display: flex;
    flex-direction: column;
}
.section-kicker .eyebrow {
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 900;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 16px;
}
.section-kicker h2,
.premium-services h2,
.premium-process h2,
.premium-faq h2,
.premium-cta h2 {
    color: #0a0e27;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
}
.intro-copy {
    color: #3d4a5f;
    font-size: 18px;
    line-height: 1.72;
    font-weight: 500;
}
.premium-services,
.premium-process {
    max-width: none;
    padding-left: max(20px, calc((100vw - var(--container)) / 2));
    padding-right: max(20px, calc((100vw - var(--container)) / 2));
    background: #f7f9fc;
}
.premium-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.premium-service-card {
    display: grid;
    gap: 14px;
    min-height: 300px;
    padding: 26px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(23,32,51,.07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.premium-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(249,115,22,.36);
    box-shadow: 0 24px 56px rgba(23,32,51,.11);
}
.premium-service-card span {
    color: var(--orange);
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}
.premium-service-card h3 {
    margin: 0;
    color: #101828;
}
.premium-service-card p {
    color: var(--muted);
}
.premium-service-card a {
    align-self: end;
    color: var(--orange);
    font-weight: 900;
}
.premium-split {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(0, 1fr);
    gap: 58px;
    align-items: center;
}
.premium-split-media img {
    height: 580px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(23,32,51,.14);
}
.premium-split-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 18px;
}
.value-list {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}
.value-list article {
    padding: 20px;
    border-left: 4px solid var(--orange);
    border-radius: 8px;
    background: #fff7ed;
}
.value-list strong {
    display: block;
    margin-bottom: 8px;
    color: #101828;
    font-size: 20px;
}
.value-list p {
    margin: 0;
    color: #5f6f84;
}

/* ==================== WHAT WE DO SECTION ==================== */

.what-we-do-section {
    position: relative;
    padding: 90px 20px 36px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 88%, rgba(37, 99, 235, 0.08) 0 120px, transparent 121px),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.what-we-do-section::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 190px;
    height: 190px;
    border-radius: 0 100% 0 0;
    background: rgba(37, 99, 235, 0.08);
    pointer-events: none;
}

.what-we-do-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    max-width: var(--container);
    margin: 0 auto;
    align-items: start;
}

.what-copy .eyebrow {
    position: relative;
    display: inline-block;
    margin: 0 0 24px;
    color: #ff5b00;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.what-copy .eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 66px;
    height: 3px;
    border-radius: 999px;
    background: #ff5b00;
}

.what-copy h2 {
    max-width: 610px;
    margin: 0 0 26px;
    color: #090f2b;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 900;
    line-height: 1.12;
}

.what-copy h2 span {
    color: #ff5b00;
}

.what-copy > p {
    max-width: 570px;
    margin: 0 0 18px;
    color: #354158;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.72;
}

.what-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin: 30px 0 34px;
}

.what-actions .button {
    min-height: 56px;
    border-radius: 999px;
    box-shadow: 0 16px 32px rgba(249, 115, 22, 0.24);
}

.what-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #071238;
    font-weight: 900;
    transition: color 0.2s ease, gap 0.2s ease;
}

.what-text-link:hover {
    gap: 14px;
    color: var(--orange);
}

.what-media {
    position: relative;
    min-height: 340px;
    margin-top: 10px;
    padding: 0 34px 28px 0;
}

.what-media::before {
    content: "";
    position: absolute;
    left: -42px;
    top: -24px;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(249, 115, 22, 0.35) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
}

.what-media img {
    position: relative;
    height: 330px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.16);
}

.what-stat {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 4px;
    min-width: 134px;
    padding: 16px 18px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(8px);
}

.what-stat strong {
    color: #071238;
    font-size: 15px;
    font-weight: 900;
}

.what-stat span {
    color: #0ca447;
    font-size: 13px;
    font-weight: 800;
}

.what-stat-performance {
    left: -16px;
    bottom: 78px;
}

.what-stat-security {
    right: 0;
    top: -20px;
}

.what-stat-seo {
    right: 42px;
    bottom: 0;
}

/* What We Do - Features Grid Redesign */
.what-features-right-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Top Grid (4 cards) */
.what-features-top-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.what-feature-card-tall {
    position: relative;
    padding: 32px 16px 24px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.what-feature-card-tall:hover {
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.what-feature-card-tall .feature-card-icon {
    font-size: 32px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.what-feature-1 .feature-card-icon { background: rgba(255, 91, 0, 0.1); color: #ff5b00; }
.what-feature-2 .feature-card-icon { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.what-feature-3 .feature-card-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.what-feature-4 .feature-card-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.what-feature-card-tall h3 {
    font-size: 15px;
    font-weight: 800;
    color: #090f2b;
    margin: 0 0 10px;
    line-height: 1.3;
}

.what-feature-card-tall p {
    font-size: 12px;
    color: #5a6f87;
    margin: 0 0 20px;
    line-height: 1.5;
}

.what-feature-card-tall .feature-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.feature-badge-1 { background: #ff5b00; }
.feature-badge-2 { background: #2563eb; }
.feature-badge-3 { background: #10b981; }
.feature-badge-4 { background: #8b5cf6; }

/* Middle Grid (6 cards) */
.what-features-middle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.what-feature-card-wide {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    transition: background 0.3s ease;
}

.what-feature-card-wide:hover {
    background: #f8fafc;
}

.what-feature-card-wide .feature-card-icon {
    font-size: 24px;
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.what-feature-5 .feature-card-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.what-feature-6 .feature-card-icon { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.what-feature-7 .feature-card-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.what-feature-8 .feature-card-icon { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.what-feature-9 .feature-card-icon { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.what-feature-10 .feature-card-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.what-feature-card-wide h3 {
    font-size: 15px;
    font-weight: 800;
    color: #090f2b;
    margin: 0 0 6px;
}

.what-feature-card-wide p {
    font-size: 12px;
    color: #5a6f87;
    margin: 0;
    line-height: 1.5;
}

/* Bottom Tech Strip */
.what-technologies-strip {
    background: #ffffff;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.what-technologies-strip h3 {
    font-size: 15px;
    font-weight: 800;
    color: #090f2b;
    margin: 0 0 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
}

.tech-strip-icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.tech-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.tech-item span {
    font-size: 11px;
    font-weight: 600;
    color: #5a6f87;
}

@media (max-width: 1024px) {
    .what-we-do-shell {
        grid-template-columns: 1fr;
    }
    .what-features-top-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .what-features-top-grid {
        grid-template-columns: 1fr;
    }
    .what-features-middle-grid {
        grid-template-columns: 1fr;
    }
    .tech-strip-icons {
        justify-content: flex-start;
    }
}

/* ==================== HOME SERVICES SECTION - SAMPLE LIGHT THEME ==================== */

.home-services-section {
    background: linear-gradient(135deg, #0d1425 0%, #1a2847 50%, #0f172e 100%);
    padding: 96px 20px;
    position: relative;
    overflow: hidden;
}

/* Subtle animated background decoration */
.home-services-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.home-services-container {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Premium Header */
.home-services-header {
    text-align: center;
    margin-bottom: 72px;
    animation: fadeInDown 800ms ease-out 100ms backwards;
}

.home-services-header .eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}

.home-services-header h2 {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 20px;
}

.services-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Services Grid - 3x3 */
.home-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

/* Service Card */
.home-service-card {
    position: relative;
    padding: 36px;
    background: rgba(26, 40, 71, 0.7);
    border: 1.5px solid rgba(249, 115, 22, 0.25);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    animation: fadeInUp 700ms ease-out backwards;
    overflow: hidden;
}

.home-service-card:nth-child(1) { animation-delay: 100ms; }
.home-service-card:nth-child(2) { animation-delay: 150ms; }
.home-service-card:nth-child(3) { animation-delay: 200ms; }
.home-service-card:nth-child(4) { animation-delay: 250ms; }
.home-service-card:nth-child(5) { animation-delay: 300ms; }
.home-service-card:nth-child(6) { animation-delay: 350ms; }
.home-service-card:nth-child(7) { animation-delay: 400ms; }
.home-service-card:nth-child(8) { animation-delay: 450ms; }
.home-service-card:nth-child(9) { animation-delay: 500ms; }

/* Service Card Hover */
.home-service-card:hover {
    background: rgba(50, 70, 110, 0.9);
    border-color: var(--orange);
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(249, 115, 22, 0.15);
}

/* Orange Number Badge (top-right corner) */
.service-card-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 90px;
    height: 90px;
    background: var(--orange);
    color: #ffffff;
    font-size: 36px;
    font-weight: 800;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 8px;
    padding-right: 12px;
    transform: none;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 2;
    line-height: 1;
}

/* Service Icon Circle */
.service-card-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    flex-shrink: 0;
}

.service-icon-svg {
    width: 100%;
    height: 100%;
    color: var(--orange);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 400ms ease;
}

.home-service-card:hover .service-icon-svg {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* Service Title */
.service-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 16px;
    transition: color 400ms ease;
}

.home-service-card:hover .service-card-title {
    color: var(--orange);
}

/* Service Description */
.service-card-description {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    margin: 0 0 24px;
    flex-grow: 1;
}

/* Service Link */
.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--orange);
    text-decoration: none;
    transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.service-card-link:hover {
    gap: 12px;
}

.link-arrow {
    display: inline-block;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card-link:hover .link-arrow {
    transform: translateX(3px);
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .home-services-header,
    .home-service-card,
    .service-icon-svg,
    .service-card-link {
        animation: none !important;
        transition: none !important;
    }

    .home-service-card:hover {
        transform: none;
    }

    .home-service-card:hover .service-icon-svg {
        transform: none;
    }

    .service-card-link:hover {
        gap: 8px;
    }

    .service-card-link:hover .link-arrow {
        transform: none;
    }
}

/* ==================== PREMIUM WHY RS SECTION ==================== */

.premium-why-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 120px 20px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;
}

/* Left: Media Container */
.why-media-container {
    position: relative;
    animation: slideInLeft 800ms ease-out 100ms backwards;
}

.why-image-wrapper {
    position: relative;
    border-radius: 30px;
    padding: 12px;
    background: linear-gradient(145deg, #ffffff, #f3f4f6);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.why-bg-element {
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(59, 130, 246, 0.2));
    z-index: -1;
    filter: blur(20px);
    opacity: 0.7;
    animation: pulseGlow 4s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.02); opacity: 0.8; }
}

.why-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Floating Stat Card */
.why-floating-card {
    position: absolute;
    bottom: -30px;
    right: -40px;
    width: 260px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.1);
    z-index: 2;
    animation: scaleUpFade 700ms ease-out 400ms backwards;
    transition: transform 0.3s ease;
}

.why-floating-card:hover {
    transform: translateY(-5px);
}

.floating-card-header {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, #f97316, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 12px;
}

.floating-card-text {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    line-height: 1.5;
}

/* Right: Content Container */
.why-content-container {
    animation: slideInRight 800ms ease-out 100ms backwards;
}

.why-header {
    margin-bottom: 56px;
}

.why-header .eyebrow {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 24px;
}

.why-header h2 {
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 24px;
    letter-spacing: -1px;
}

.highlight-orange {
    color: var(--orange);
}

.why-description {
    font-size: 19px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Feature Rows */
.why-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    margin-bottom: 48px;
}

.why-feature-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px 28px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    animation: slideUpFade 700ms ease-out backwards;
}

.why-feature-row:hover {
    background: #ffffff;
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    transform: translateX(8px);
}

.why-feature-row:first-child { animation-delay: 200ms; }
.why-feature-row:nth-child(2) { animation-delay: 300ms; }
.why-feature-row:nth-child(3) { animation-delay: 400ms; }

.feature-number {
    font-size: 24px;
    font-weight: 900;
    color: #cbd5e1;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.why-feature-row:hover .feature-number {
    color: var(--orange);
}

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0;
}

.feature-description {
    font-size: 15px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Tech Indicators */
.why-tech-indicators {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}

.tech-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 16px;
}

.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tech-pill {
    display: inline-block;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.tech-pill:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
    transform: translateY(-2px);
}

/* CTA */
.why-cta {
    margin-top: 40px;
}

.why-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    background: var(--orange);
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-cta-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.35);
    background: #ea580c;
}

.cta-arrow {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-cta-link:hover .cta-arrow {
    transform: translateX(4px);
}

/* Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleUpFade {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .premium-why-section,
    .why-media-container,
    .why-content-container,
    .why-feature-row,
    .why-floating-card,
    .tech-pill,
    .why-cta-link {
        animation: none !important;
        transition: none !important;
    }

    .why-feature-row:hover .feature-title {
        color: var(--ink);
    }

    .why-cta-link:hover {
        gap: 8px;
    }

    .why-cta-link:hover .cta-arrow {
        transform: none;
    }
}

/* Modern Premium Process Section */
.modern-process-section {
    position: relative;
    background: #0b1120;
    color: #fff;
    padding: 100px 20px;
    overflow: hidden;
}

.modern-process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: radial-gradient(circle at top, rgba(249, 115, 22, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.process-container {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.process-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 72px;
}

.process-header .eyebrow {
    color: #f97316;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.process-header h2 {
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.process-subtitle {
    color: #94a3b8;
    font-size: 18px;
}

.process-steps-wrapper {
    position: relative;
}

.process-path-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.1) 85%, transparent);
    transform: translateY(-50%);
    z-index: 1;
}

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

.process-card-premium {
    position: relative;
}

.process-card-inner {
    position: relative;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 2;
}

.process-card-inner:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.process-icon-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.process-step-number {
    font-size: 16px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 1px;
}

.process-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.process-card-inner:hover .process-icon {
    transform: scale(1.1) rotate(5deg);
}

.bg-orange-glow {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.2);
}
.bg-blue-glow {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.2);
}
.bg-green-glow {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.2);
}
.bg-purple-glow {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.2);
}

.process-title {
    font-size: 22px;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 16px;
}

.process-desc {
    color: #94a3b8;
    line-height: 1.6;
    font-size: 15px;
    margin: 0;
}

.process-card-bg-number {
    position: absolute;
    bottom: -20px;
    right: 10px;
    font-size: 140px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    z-index: -1;
    transition: all 0.4s ease;
}

.process-card-inner:hover .process-card-bg-number {
    color: rgba(255, 255, 255, 0.04);
    transform: translateX(-10px) translateY(-10px);
}

@media (max-width: 1024px) {
    .process-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .process-path-line {
        display: none;
    }
}

@media (max-width: 640px) {
    .process-grid-enhanced {
        grid-template-columns: 1fr;
    }
    .modern-process-section {
        padding: 64px 20px;
    }
}
.premium-tech {
    background:
        linear-gradient(135deg, rgba(9,17,31,.98), rgba(15,33,57,.96)),
        url("../site-assets/banner2.webp") center/cover;
}
.tech-section-head {
    max-width: 860px;
    margin: 0 auto 56px;
    text-align: center;
}
.tech-section-head .eyebrow {
    color: #fff2e8;
    margin-bottom: 16px;
}
.tech-section-head h2 {
    color: #fff;
    font-size: clamp(38px, 4.8vw, 60px);
    font-weight: 900;
    margin-bottom: 20px;
}
.tech-section-head p {
    color: rgba(255,255,255,.84);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}
.tech-section-head .button {
    margin: 0 auto;
}
.tech-home {
    display: flex;
    flex-direction: column;
}
.tech-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 48px;
    max-width: none;
    align-items: start;
}
.tech-category-link {
    text-decoration: none;
    display: block;
    transition: transform .2s ease;
}
.tech-category-link:hover {
    transform: translateY(-8px);
}
.tech-category-link:hover .tech-category h3 {
    color: #ffb985;
}
.tech-category {
    display: grid;
    gap: 20px;
    height: 100%;
}
.tech-category h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(249,115,22,.5);
}
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    align-items: stretch;
}
.tech-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(249,115,22,.3);
    border-radius: 8px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all .2s ease;
    cursor: pointer;
    height: 100%;
}
.tech-grid span:hover {
    background: rgba(249,115,22,.15);
    border-color: rgba(249,115,22,.8);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249,115,22,.2);
}
.premium-project-grid {
    align-items: stretch;
}
.premium-project {
    transition: transform .2s ease, box-shadow .2s ease;
}
.premium-project:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 58px rgba(23,32,51,.12);
}
.premium-project img {
    height: 250px;
}
.premium-project span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}
.premium-faq {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr);
    gap: 54px;
}
.faq-list {
    display: grid;
    gap: 14px;
}
.faq-list article {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(23,32,51,.07);
}
.faq-list h3 {
    margin-bottom: 10px;
    color: #101828;
}
.faq-list p {
    margin: 0;
    color: var(--muted);
}
.premium-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    max-width: none;
    padding-left: max(20px, calc((100vw - var(--container)) / 2));
    padding-right: max(20px, calc((100vw - var(--container)) / 2));
    color: #fff;
    background: linear-gradient(135deg, #ff5b00, #f97316 54%, #111827 54%, #101828);
}
.premium-cta .eyebrow {
    color: #fff2e8;
}
.premium-cta h2 {
    color: #fff;
}
.premium-cta p {
    max-width: 700px;
    color: rgba(255,255,255,.82);
    font-size: 18px;
}
.live-portfolio-section {
    max-width: none;
    padding: 90px max(20px, calc((100vw - var(--container)) / 2));
    background: #fff;
    overflow: hidden;
}
.live-portfolio-head {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
}
.live-portfolio-head .eyebrow {
    margin-bottom: 12px;
}
.live-portfolio-head h2 {
    color: #101828;
    font-size: clamp(38px, 4.8vw, 66px);
    font-weight: 900;
}
.live-portfolio-head h2 span {
    color: var(--orange);
}
.live-portfolio-head p:not(.eyebrow) {
    color: var(--muted);
    font-size: 18px;
}
.live-portfolio-wrap {
    position: relative;
}
.live-portfolio-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3);
    gap: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0 24px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.live-portfolio-track::-webkit-scrollbar {
    display: none;
}
.live-portfolio-card {
    min-height: 580px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(23,32,51,.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23,32,51,.06);
    scroll-snap-align: start;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.live-portfolio-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249,115,22,.36);
    box-shadow: 0 24px 60px rgba(23,32,51,.12);
}
.live-portfolio-image {
    position: relative;
    height: 268px;
    overflow: hidden;
    background: #eef2f7;
}
.live-portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .5s ease;
}
.live-portfolio-card:hover .live-portfolio-image img {
    transform: scale(1.05);
}
.live-portfolio-image .corner-accents {
    position: absolute;
    inset: 15px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .3s ease, transform .3s ease;
    background:
        linear-gradient(to right, var(--orange) 4px, transparent 4px) 0 0,
        linear-gradient(to bottom, var(--orange) 4px, transparent 4px) 0 0,
        linear-gradient(to left, #ea580c 4px, transparent 4px) 100% 0,
        linear-gradient(to bottom, #ea580c 4px, transparent 4px) 100% 0,
        linear-gradient(to right, var(--orange) 4px, transparent 4px) 0 100%,
        linear-gradient(to top, var(--orange) 4px, transparent 4px) 0 100%,
        linear-gradient(to left, #ea580c 4px, transparent 4px) 100% 100%,
        linear-gradient(to top, #ea580c 4px, transparent 4px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 28px 28px;
}
.live-portfolio-card:hover .corner-accents {
    opacity: 1;
    transform: scale(1);
}
.live-portfolio-image .tech-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    color: #fff;
    background: rgba(9, 17, 31, .86);
    opacity: 0;
    transition: opacity .3s ease;
}
.live-portfolio-card:hover .tech-overlay {
    opacity: 1;
}
.live-portfolio-image .tech-overlay h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
}
.live-portfolio-image .tech-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.live-portfolio-image .tech-tags span {
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
    font-size: 13px;
    font-weight: 800;
}
.live-portfolio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 32px 34px;
}
.live-portfolio-content > span {
    margin-bottom: 12px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.live-portfolio-content h3 {
    margin-bottom: 18px;
    color: #101828;
    font-size: 29px;
    line-height: 1.15;
}
.live-portfolio-content p {
    color: #475467;
    font-size: 18px;
    line-height: 1.55;
}
.live-portfolio-content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    color: #101828;
    font-size: 17px;
    font-weight: 900;
}
.live-portfolio-content a:hover {
    color: var(--orange);
}
.live-portfolio-content a span {
    transition: transform .2s ease;
}
.live-portfolio-content a:hover span {
    transform: translateX(4px);
}
.live-portfolio-nav {
    position: absolute;
    top: 44%;
    z-index: 8;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(23,32,51,.08);
    border-radius: 50%;
    color: #101828;
    background: #fff;
    box-shadow: 0 12px 30px rgba(23,32,51,.16);
    font-size: 34px;
    line-height: 1;
}
.live-portfolio-nav:hover {
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ea580c);
}
.live-portfolio-prev {
    left: -28px;
}
.live-portfolio-next {
    right: -28px;
}
.live-portfolio-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}
.live-portfolio-dots span {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #d9dde3;
}
.live-portfolio-dots .active {
    width: 28px;
    background: var(--orange);
}

/* ==================== PREMIUM SERVICES SECTION ==================== */

.premium-services-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 96px 20px 64px;
}

/* Premium Services Header */
.premium-services-header {
    margin-bottom: 72px;
}

.services-header-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.services-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}

.services-headline {
    font-size: 56px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 28px;
}

.services-description {
    font-size: 18px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 36px;
}

.services-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 15px;
}

.meta-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 99px;
    color: var(--orange);
    font-weight: 600;
}

.meta-text {
    color: var(--muted);
    font-weight: 500;
}

/* Premium Service Cards Grid */
.premium-service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 72px;
}

.premium-service-card {
    position: relative;
    padding: 40px;
    background: #ffffff;
    border: 1px solid rgba(249, 115, 22, 0.15);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.premium-service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 12px 32px rgba(249, 115, 22, 0.12);
}

/* Featured Service Card */
.premium-service-card.featured-service {
    border-color: rgba(249, 115, 22, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(249, 115, 22, 0.04));
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.08);
}

.premium-service-card.featured-service:hover {
    border-color: var(--orange);
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.18);
}

.service-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 20px;
}

.service-number {
    display: block;
    font-size: 48px;
    font-weight: 800;
    color: rgba(249, 115, 22, 0.6);
    line-height: 1;
    margin-bottom: 24px;
    transition: color 350ms ease;
}

.premium-service-card:hover .service-number {
    color: var(--orange);
}

.service-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    background: rgba(249, 115, 22, 0.08);
    border-radius: 12px;
    transition: all 350ms ease;
}

.premium-service-card:hover .service-icon-wrapper {
    background: rgba(249, 115, 22, 0.15);
    transform: scale(1.08);
}

.service-icon {
    width: 32px;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Subtle icon patterns using CSS */
[data-icon-type="service-1"]::before {
    content: "◆";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-2"]::before {
    content: "≡";
    font-size: 32px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-3"]::before {
    content: "◉";
    font-size: 24px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-4"]::before {
    content: "☰";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-5"]::before {
    content: "◧";
    font-size: 24px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-6"]::before {
    content: "∩";
    font-size: 32px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-7"]::before {
    content: "◩";
    font-size: 24px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-8"]::before {
    content: "◎";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-9"]::before {
    content: "◈";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-10"]::before {
    content: "◒";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-11"]::before {
    content: "◫";
    font-size: 24px;
    color: var(--orange);
    opacity: 0.7;
}

[data-icon-type="service-12"]::before {
    content: "◰";
    font-size: 28px;
    color: var(--orange);
    opacity: 0.7;
}

.service-content {
    position: relative;
    z-index: 2;
}

.service-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 16px;
    line-height: 1.3;
}

.service-description {
    font-size: 16px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.service-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--orange);
    transition: all 350ms ease;
}

.premium-service-card:hover .service-cta {
    gap: 12px;
}

.cta-arrow {
    display: inline-block;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-service-card:hover .cta-arrow {
    transform: translateX(3px);
}

/* Subtle Background Pattern */
.service-bg-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    opacity: 0.03;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100%;
}

[data-pattern="1"] {
    background-image: 
        linear-gradient(45deg, var(--orange) 25%, transparent 25%),
        linear-gradient(-45deg, var(--orange) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--orange) 75%),
        linear-gradient(-45deg, transparent 75%, var(--orange) 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

[data-pattern="2"] {
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 19px, var(--orange) 19px, var(--orange) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, var(--orange) 19px, var(--orange) 20px);
    background-size: 20px 20px;
}

[data-pattern="3"] {
    background-image: 
        linear-gradient(0deg, var(--orange) 1px, transparent 1px),
        linear-gradient(90deg, var(--orange) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.04;
}

[data-pattern="4"] {
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, var(--orange) 35px, var(--orange) 70px);
    background-size: 100px 100px;
    opacity: 0.04;
}

[data-pattern="5"] {
    background-image: radial-gradient(circle, var(--orange) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.04;
}

[data-pattern="6"] {
    background-image: 
        linear-gradient(135deg, var(--orange) 25%, transparent 25%),
        linear-gradient(225deg, var(--orange) 25%, transparent 25%),
        linear-gradient(45deg, var(--orange) 25%, transparent 25%),
        linear-gradient(315deg, var(--orange) 25%, transparent 25%);
    background-size: 40px 40px;
    background-position: 0 0, 10px 0, 10px 10px, 0 10px;
    opacity: 0.04;
}

/* Premium CTA Section */
.premium-cta-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 64px 40px;
    background: linear-gradient(135deg, #ffffff 0%, rgba(249, 115, 22, 0.03) 100%);
    border: 1.5px solid rgba(249, 115, 22, 0.15);
    border-radius: 24px;
    text-align: center;
}

.cta-headline {
    font-size: 44px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 16px;
    line-height: 1.2;
}

.cta-description {
    font-size: 18px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 36px;
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--orange);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.cta-button:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(249, 115, 22, 0.25);
}

.button-arrow {
    display: inline-block;
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-button:hover .button-arrow {
    transform: translateX(4px);
}

.cta-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--orange);
    text-decoration: underline;
    transition: all 350ms ease;
}

.cta-link:hover {
    color: var(--orange-dark);
}

/* Animation for scroll entrance */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.premium-services-header {
    animation: slideUpFade 800ms ease-out 100ms backwards;
}

.premium-service-card {
    animation: slideUpFade 800ms ease-out backwards;
}

.premium-service-card:nth-child(1) { animation-delay: 200ms; }
.premium-service-card:nth-child(2) { animation-delay: 300ms; }
.premium-service-card:nth-child(3) { animation-delay: 400ms; }
.premium-service-card:nth-child(4) { animation-delay: 500ms; }
.premium-service-card:nth-child(5) { animation-delay: 600ms; }
.premium-service-card:nth-child(6) { animation-delay: 700ms; }
.premium-service-card:nth-child(7) { animation-delay: 800ms; }
.premium-service-card:nth-child(8) { animation-delay: 900ms; }
.premium-service-card:nth-child(9) { animation-delay: 1000ms; }
.premium-service-card:nth-child(10) { animation-delay: 1100ms; }
.premium-service-card:nth-child(11) { animation-delay: 1200ms; }
.premium-service-card:nth-child(12) { animation-delay: 1300ms; }

.premium-cta-section {
    animation: slideUpFade 800ms ease-out 800ms backwards;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .premium-service-card,
    .premium-services-header,
    .premium-cta-section,
    .service-cta,
    .cta-button,
    .service-number,
    .service-icon-wrapper,
    .service-bg-pattern {
        animation: none !important;
        transition: none !important;
    }

    .premium-service-card:hover {
        transform: none;
    }

    .premium-service-card:hover .service-number {
        color: var(--orange);
    }

    .premium-service-card:hover .cta-arrow {
        transform: none;
    }
}

/* Responsive Home Services */
@media (max-width: 1100px) {
    .what-we-do-section {
        padding-top: 72px;
    }
    .what-we-do-shell {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .what-copy h2,
    .what-copy > p {
        max-width: 760px;
    }
    .what-media {
        max-width: 720px;
    }
    /* Home Services - Tablet */
    .home-services-section {
        padding: 72px 20px;
    }
    .home-services-header {
        margin-bottom: 56px;
    }
    .home-services-header h2 {
        font-size: 44px;
    }
    .services-subtitle {
        font-size: 16px;
    }
    /* Hero Panel - Tablet */
    .hero-device-mockup {
        height: clamp(400px, 45vw, 520px);
    }
    .device-screen {
        width: 340px;
        height: 360px;
        border-width: 12px;
        padding: 28px 24px;
    }
    .screen-header {
        font-size: 22px;
        margin-bottom: 14px;
    }
    .screen-text {
        font-size: 13px;
        margin-bottom: 18px;
    }
    .floating-card {
        width: 160px;
        padding: 14px 12px;
    }
    .card-icon {
        font-size: 24px;
        margin-bottom: 4px;
    }
    .card-label {
        font-size: 10px;
        margin-bottom: 3px;
    }
    .floating-card p {
        font-size: 10px;
    }
    .home-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .home-service-card {
        padding: 32px;
    }
    .service-card-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 24px;
    }
    .service-card-title {
        font-size: 20px;
        margin-bottom: 14px;
    }
}

@media (max-width: 900px) {
    .what-copy h2 {
        font-size: 40px;
    }
    .what-media {
        padding-right: 0;
    }
    .what-stat-security,
    .what-stat-seo {
        right: 16px;
    }
    /* Home Services - Mobile */
    .home-services-section {
        padding: 52px 20px;
    }
    .home-services-header {
        margin-bottom: 40px;
    }
    .home-services-header h2 {
        font-size: 36px;
    }
    .services-subtitle {
        font-size: 15px;
    }
    .home-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .home-service-card {
        padding: 28px;
    }
    .service-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 18px;
    }
    .service-card-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .service-card-description {
        font-size: 14px;
    }
    
    /* Hero Panel - Mobile */
    .hero-device-mockup {
        height: auto;
        margin-top: 32px;
    }
    .floating-card {
        position: static;
        width: 100%;
        margin-bottom: 12px;
        animation: none;
        z-index: auto;
    }
    .floating-card:hover {
        transform: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
    .floating-card-1,
    .floating-card-2,
    .floating-card-3,
    .floating-card-4 {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: auto;
        animation: none !important;
    }
    .device-screen {
        position: static;
        width: 100%;
        height: auto;
        margin-top: 16px;
        border-width: 8px;
        padding: 24px 20px;
        z-index: auto;
    }
    .device-screen::before,
    .device-screen::after {
        display: none;
    }
    .screen-header {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .screen-text {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .screen-button {
        padding: 8px 20px;
        font-size: 12px;
    }
}

@media (max-width: 560px) {
    .what-we-do-section {
        padding: 52px 20px 34px;
    }
    .what-copy h2 {
        font-size: 34px;
    }
    .what-copy > p {
        font-size: 16px;
    }
    .what-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .what-actions .button,
    .what-text-link {
        justify-content: center;
        width: 100%;
    }
    .what-media {
        min-height: 0;
        padding-bottom: 0;
    }
    .what-media::before {
        display: none;
    }
    .what-media img {
        height: 250px;
    }
    .what-stat {
        position: static;
        margin-top: 10px;
    }
    /* Home Services - Small Mobile */
    .home-services-section {
        padding: 40px 20px;
    }
    .home-services-header h2 {
        font-size: 28px;
        margin-bottom: 14px;
    }
    .services-subtitle {
        font-size: 14px;
    }
    .home-services-header {
        margin-bottom: 32px;
    }
    .home-services-grid {
        gap: 16px;
    }
    .home-service-card {
        padding: 24px;
    }
    .service-card-badge {
        width: 80px;
        height: 80px;
        font-size: 32px;
        padding-top: 6px;
        padding-right: 10px;
    }
    .service-card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
    }
    .service-card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .service-card-description {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .service-card-link {
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    .nav {
        position: sticky;
        top: 0;
        z-index: 40;
        min-height: 76px;
        padding-top: 10px;
        padding-bottom: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(23,32,51,.06);
        border-bottom: 1px solid var(--line);
    }
    .brand img {
        width: clamp(190px, 46vw, 260px);
        height: 62px;
    }
    .nav-toggle {
        display: grid;
        gap: 5px;
    }
    .navlinks {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        z-index: 25;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(23,32,51,.16);
        font-size: 16px;
    }
    .navlinks.is-open {
        display: flex;
    }
    .navlinks a {
        padding: 12px 14px;
        border-radius: 7px;
    }
    .navlinks a:hover {
        background: var(--soft);
    }
    .nav-dropdown {
        display: grid;
    }
    .dropdown-toggle {
        justify-content: space-between;
    }
    .dropdown-menu {
        position: static;
        min-width: 0;
        padding: 0 0 6px 14px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
    }
    .dropdown-menu::before {
        display: none;
    }
    .dropdown-menu a {
        padding: 10px 14px;
        color: var(--muted);
        font-size: 15px;
    }
    .navlinks .quote-link {
        justify-content: center;
        min-height: 44px;
        margin: 8px 0 0;
        padding: 0 16px;
    }
    .premium-hero,
    .premium-split,
    .premium-faq {
        grid-template-columns: 1fr;
    }
    .premium-hero {
        min-height: auto;
    }
    .hero-panel-card {
        left: 24px;
    }
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 32px;
    }
    .hero-feature-item {
        padding: 16px;
    }
    .hero-device-mockup {
        height: auto;
    }
    .floating-card {
        position: static;
        width: 100%;
        margin-bottom: 16px;
        animation: none;
    }
    .floating-card:hover {
        transform: none;
    }
    .device-screen {
        width: 100%;
        height: auto;
        margin-top: 24px;
    }
    .trusted-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .premium-service-grid,
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .live-portfolio-track {
        grid-auto-columns: calc((100% - 30px) / 2);
    }

    /* Premium Why Section - Tablet */
    .premium-why-section {
        grid-template-columns: 40fr 60fr;
        gap: 60px;
        padding: 72px 20px;
    }
    .why-header h2 {
        font-size: 44px;
    }
    .why-description {
        font-size: 16px;
    }
    .why-floating-card {
        width: 200px;
        padding: 20px;
        bottom: 30px;
        right: -20px;
    }
    .floating-card-header {
        font-size: 22px;
    }

    /* Premium Services - Tablet */
    .premium-services-section {
        padding: 72px 20px 52px;
    }
    .premium-services-header {
        margin-bottom: 56px;
    }
    .services-headline {
        font-size: 44px;
    }
    .services-description {
        font-size: 16px;
        margin-bottom: 28px;
    }
    .premium-service-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        margin-bottom: 56px;
    }
    .premium-service-card {
        padding: 32px;
    }
    .premium-cta-section {
        padding: 52px 32px;
    }
    .cta-headline {
        font-size: 36px;
    }
}

@media (max-width: 900px) {
    .hero { min-height: 560px; }
    .home-hero { min-height: auto; }
    .split, .page-hero, .form-section, .footer { grid-template-columns: 1fr; }
    .grid, .project-grid, .home-showcase, .expertise-grid, .why-home, .tech-home, .tech-list, .portfolio-hero, .portfolio-intro, .portfolio-showcase, .portfolio-process { grid-template-columns: 1fr; }
    .band { align-items: flex-start; flex-direction: column; }
    .why-intro { position: static; }
    .portfolio-hero {
        min-height: auto;
        gap: 24px;
        padding-top: 46px;
        background: #f7f9fc;
    }
    .portfolio-hero::after {
        display: none;
    }
    .portfolio-hero-media {
        min-height: 0;
        order: 2;
    }
    .portfolio-hero-media img {
        width: 100%;
        height: auto;
        max-height: 420px;
    }
    .portfolio-hero-copy {
        max-width: none;
    }
    .portfolio-intro {
        padding-top: 54px;
    }
    .intro-section {
        grid-template-columns: 1fr;
        gap: 26px;
    }
    .premium-cta {
        align-items: flex-start;
        flex-direction: column;
        background: linear-gradient(135deg, #ff5b00, #101828);
    }
    .live-portfolio-nav {
        display: none;
    }

    /* Premium Why Section - Mobile */
    .premium-why-section {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 52px 20px;
    }
    .why-header h2 {
        font-size: 36px;
    }
    .why-description {
        font-size: 15px;
    }
    .why-floating-card {
        position: static;
        width: 100%;
        max-width: 280px;
        margin-top: 20px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }
    .why-features {
        margin-top: 40px;
    }
    .why-feature-row {
        padding: 24px 0;
    }
    .feature-number {
        font-size: 18px;
    }
    .feature-title {
        font-size: 16px;
    }
    .feature-description {
        font-size: 14px;
    }
    .why-tech-indicators {
        margin-top: 32px;
        padding-top: 32px;
    }
    .tech-pills {
        gap: 8px;
    }
    .tech-pill {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* Premium Services - Small Tablet */
    .premium-service-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .topline { display: none; }
    .topbar { padding-top: 0; }
    .footer { padding-left: 20px; padding-right: 20px; }
    .footer-brand { width: min(100%, 320px); }
    .footer-brand img { height: 78px; }
    .newsletter input { max-width: none; }
    h1 { font-size: 38px; }
    .home-hero h1 { font-size: 40px; }
    .hero-copy, .split, .page-hero, .section, .band, .form-section, .footer, .why-home, .tech-home { padding-top: 48px; padding-bottom: 48px; }
    .portfolio-hero, .portfolio-process { padding-top: 44px; padding-bottom: 44px; }
    .portfolio-showcase { padding-bottom: 48px; }
    .portfolio-card img { height: 210px; }
    .stats { grid-template-columns: 1fr; }
    .service-list article { grid-template-columns: 1fr; }
    .why-list article { grid-template-columns: 1fr; }
    .why-list span { grid-row: auto; }
    .premium-hero,
    .premium-section,
    .premium-services,
    .premium-split,
    .premium-process,
    .premium-faq,
    .premium-cta {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .premium-hero h1 {
        font-size: 42px;
    }
    .premium-hero p:not(.eyebrow) {
        font-size: 17px;
    }
    .hero-proof,
    .premium-service-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }
    .hero-features {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 32px;
    }
    .hero-feature-item {
        padding: 12px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .feature-icon {
        font-size: 24px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .hero-feature-item strong {
        font-size: 14px;
        margin-bottom: 0;
    }
    .hero-feature-item span {
        display: none;
    }
    .hero-device-mockup {
        height: auto;
    }
    .floating-card {
        position: static;
        width: 100%;
        margin-bottom: 16px;
        animation: none;
    }
    .floating-card-1,
    .floating-card-2,
    .floating-card-3,
    .floating-card-4 {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
    }
    .device-screen {
        width: 100%;
        height: auto;
        margin-top: 24px;
        border-width: 8px;
        padding: 24px 20px;
    }
    .screen-header {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .screen-text {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .screen-button {
        padding: 8px 20px;
        font-size: 12px;
    }
    .premium-hero-panel img,
    .premium-split-media img {
        height: auto;
        max-height: 420px;
    }
    .hero-panel-card {
        position: static;
        width: auto;
        margin-top: 14px;
    }
    .brand-strip {
        justify-content: flex-start;
    }
    .live-portfolio-section {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .live-portfolio-head {
        margin-bottom: 32px;
        text-align: left;
    }
    .live-portfolio-track {
        grid-auto-columns: 88%;
        gap: 18px;
        overflow: auto;
    }
    .live-portfolio-card {
        min-height: 520px;
    }
    .live-portfolio-image {
        height: 210px;
    }
    .live-portfolio-content {
        padding: 24px;
    }
    .live-portfolio-content h3 {
        font-size: 24px;
    }
    .live-portfolio-content p {
        font-size: 16px;
    }
    .tech-section-head {
        margin-bottom: 40px;
    }
    .tech-section-head h2 {
        font-size: 36px;
    }
    .tech-section-head p {
        font-size: 15px;
    }
    .tech-categories {
        gap: 36px;
    }
    .tech-category h3 {
        font-size: 19px;
    }
    .tech-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }
    .tech-grid span {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Premium Why Section - Small Mobile */
    .premium-why-section {
        padding: 40px 20px;
        gap: 32px;
    }
    .why-header .eyebrow {
        font-size: 12px;
        margin-bottom: 14px;
    }
    .why-header h2 {
        font-size: 28px;
        margin-bottom: 16px;
    }
    
    /* Trusted Section - Small Mobile */
    .trusted-section {
        padding: 48px 20px;
    }
    .trusted-section h3 {
        font-size: 20px;
        margin-bottom: 28px;
    }
    .trusted-logos {
        gap: 20px;
        margin-bottom: 40px;
    }
    .logo-placeholder {
        font-size: 12px;
        padding: 0 12px;
    }
    .trusted-stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .stat-number {
        font-size: 36px;
    }
    .stat-label {
        font-size: 13px;
    }
    
    .why-description {
        font-size: 14px;
    }
    .why-floating-card {
        max-width: none;
    }
    .floating-card-header {
        font-size: 20px;
    }
    .floating-card-text {
        font-size: 13px;
    }
    .why-features {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .why-feature-row {
        grid-template-columns: 40px 1fr;
        gap: 16px;
        padding: 20px 0;
    }
    .feature-number {
        font-size: 16px;
    }
    .feature-title {
        font-size: 15px;
    }
    .feature-description {
        font-size: 13px;
    }
    .why-tech-indicators {
        margin-top: 28px;
        padding-top: 28px;
    }
    .tech-label {
        font-size: 11px;
        margin-bottom: 10px;
    }
    .why-cta-link {
        font-size: 14px;
    }

    /* Premium Services - Mobile */
    .premium-services-section {
        padding: 52px 20px 40px;
    }
    .premium-services-header {
        margin-bottom: 40px;
    }
    .services-eyebrow {
        font-size: 12px;
        margin-bottom: 16px;
    }
    .services-headline {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .services-description {
        font-size: 15px;
        margin-bottom: 24px;
    }
    .services-meta {
        flex-direction: column;
        gap: 16px;
    }
    .meta-badge {
        padding: 6px 12px;
        font-size: 12px;
    }
    .meta-text {
        font-size: 14px;
    }
    .premium-service-cards {
        gap: 20px;
        margin-bottom: 40px;
    }
    .premium-service-card {
        padding: 24px;
    }
    .service-number {
        font-size: 36px;
        margin-bottom: 16px;
    }
    .service-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
    .service-description {
        font-size: 14px;
        margin-bottom: 18px;
    }
    .service-cta {
        font-size: 14px;
    }
    .premium-cta-section {
        padding: 40px 24px;
        margin: 0 20px;
        border-radius: 16px;
    }
    .cta-headline {
        font-size: 28px;
        margin-bottom: 12px;
    }
    .cta-description {
        font-size: 15px;
        margin-bottom: 28px;
    }
    .cta-actions {
        gap: 16px;
    }
    .cta-button {
        padding: 14px 24px;
        font-size: 14px;
        width: 100%;
    }
    .cta-link {
        font-size: 14px;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 1200px) {
    .premium-hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .premium-hero-copy {
        max-width: 900px;
    }
    .premium-hero-panel {
        max-width: 820px;
        width: 100%;
        margin: 0 auto;
    }
    .hero-device-mockup {
        min-height: 610px;
    }
    .floating-card-2 {
        left: 2%;
    }
    .floating-card-4 {
        right: 0;
        bottom: 50%;
    }
}

@media (max-width: 900px) {
    .premium-hero {
        padding-top: 52px;
        text-align: left;
    }
    .premium-hero h1 {
        font-size: clamp(42px, 12vw, 66px);
    }
    .premium-hero .actions {
        gap: 12px;
    }
    .hero-button {
        min-height: 52px;
    }
    .hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero-feature-item {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 0;
    }
    .feature-icon {
        width: 42px;
        height: 42px;
    }
    .hero-device-mockup {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        min-height: 0;
        margin-top: 26px;
    }
    .hero-orbit,
    .hero-dotted,
    .hero-cube,
    .hero-sphere,
    .hero-paper-plane {
        display: none;
    }
    .floating-card,
    .floating-card-1,
    .floating-card-2,
    .floating-card-3,
    .floating-card-4 {
        position: static;
        width: 100%;
        min-height: 96px;
        margin: 0;
        transform: none !important;
        animation: none;
    }
    .device-screen {
        position: relative;
        grid-column: 1 / -1;
        width: 100%;
        height: auto;
        min-height: 260px;
        margin: 10px 0 0;
        padding-left: 34px;
        transform: none;
    }
    .device-screen::after {
        display: none;
    }
    .screen-content::after {
        right: 4px;
        top: 8px;
        width: 104px;
        height: 104px;
        opacity: .75;
    }
    .hero-phone {
        position: relative;
        grid-column: 1 / -1;
        right: auto;
        bottom: auto;
        width: min(260px, 100%);
        min-height: 220px;
        margin: 8px auto 0;
        transform: none;
    }
}

@media (max-width: 560px) {
    .premium-hero {
        padding-left: 20px;
        padding-right: 20px;
    }
    .premium-hero-copy > .eyebrow {
        font-size: 12px;
    }
    .premium-hero h1 {
        font-size: 41px;
    }
    .premium-hero p:not(.eyebrow) {
        font-size: 16px;
        line-height: 1.62;
    }
    .premium-hero .actions {
        align-items: stretch;
        flex-direction: column;
    }
    .hero-button {
        justify-content: space-between;
        width: 100%;
    }
    .hero-features {
        grid-template-columns: 1fr;
    }
    .hero-device-mockup {
        grid-template-columns: 1fr;
    }
    .hero-feature-item span:not(.feature-icon) {
        display: block;
    }
    .floating-card {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 90px;
        padding: 14px;
    }
    .card-icon {
        width: 50px;
        height: 50px;
    }
    .device-screen {
        min-height: 230px;
        padding: 54px 22px 24px;
        border-width: 9px;
    }
    .screen-header {
        font-size: 19px;
    }
    .screen-content::after {
        display: none;
    }
    .hero-phone {
        width: min(220px, 100%);
    }
}

@media (max-width: 900px) {
    .premium-hero .feature-icon,
    .premium-hero .card-icon {
        font-size: 0 !important;
        line-height: 1;
        overflow: hidden;
    }
    .premium-hero .feature-icon::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: "Instrument Sans", Arial, sans-serif;
        font-size: 13px;
        font-weight: 900;
    }
    .premium-hero .floating-card {
        border-radius: 12px;
        box-shadow: 0 14px 34px rgba(40, 65, 110, .12);
    }
}

@media (max-width: 560px) {
    .premium-hero .hero-features {
        gap: 18px;
        margin-top: 34px;
    }
    .premium-hero .hero-feature-item {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 58px;
        gap: 10px;
    }
    .premium-hero .feature-icon {
        width: 44px;
        height: 44px;
    }
    .premium-hero .hero-feature-item strong {
        font-size: 14px;
        line-height: 1.2;
    }
    .premium-hero .hero-feature-item span:not(.feature-icon) {
        font-size: 12px;
        line-height: 1.35;
    }
    .premium-hero .hero-device-mockup {
        gap: 12px;
        margin-top: 32px;
    }
    .premium-hero .floating-card {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 0;
        padding: 14px;
    }
    .premium-hero .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
    }
    .premium-hero .card-label {
        align-self: center;
        font-size: 13px;
        line-height: 1.2;
    }
    .premium-hero .floating-card p {
        font-size: 12px;
        line-height: 1.45;
    }
    .premium-hero .device-screen {
        display: none;
    }
    .premium-hero .hero-phone {
        display: none;
    }
}
/* ==================== OUR APPROACH PAGE ==================== */

.approach-page {
    background: #ffffff;
    color: var(--ink);
    padding-bottom: 80px;
}

.approach-page .container {
    max-width: var(--container);
    margin: 0 auto;
    width: 100%;
}

.approach-hero {
    position: relative;
    padding: 140px 20px 100px;
    text-align: center;
    background: #0b0d14;
    color: #ffffff;
    overflow: hidden;
}

.approach-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.approach-hero-content .eyebrow {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 24px;
}

.approach-hero-content h1 {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.approach-hero-content .hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.approach-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.approach-hero-bg .bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.approach-hero-bg .shape-1 {
    top: -100px;
    left: -100px;
    width: 500px;
    height: 500px;
    background: var(--orange);
}

.approach-hero-bg .shape-2 {
    bottom: -150px;
    right: -50px;
    width: 600px;
    height: 600px;
    background: #3b82f6;
}

/* Philosophy */
.approach-philosophy {
    padding: 100px 20px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
}

.philosophy-text h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.lead-text {
    font-size: 22px;
    font-weight: 500;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 24px;
}

.philosophy-text p:not(.lead-text) {
    font-size: 17px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 16px;
}

.philosophy-visual {
    position: relative;
    padding: 20px;
}

.visual-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
}

.visual-icon {
    width: 64px;
    height: 64px;
    background: rgba(249, 115, 22, 0.1);
    color: var(--orange);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.visual-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
}

.visual-card p {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
}

/* 80/20 Approach */
.approach-8020 {
    padding: 100px 20px;
    background: #f8fafc;
}

.section-header {
    margin-bottom: 64px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 18px;
    color: #64748b;
}

.split-8020 {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 32px;
}

.box-80, .box-20 {
    background: #ffffff;
    border-radius: 24px;
    padding: 48px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-80:hover, .box-20:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.box-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.percentage {
    font-size: 48px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

.percentage.orange {
    color: var(--orange);
}

.box-header h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.box-desc {
    font-size: 16px;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.6;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.box-80 .check-list {
    grid-template-columns: 1fr 1fr;
}

.check-list li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-weight: 900;
}

/* AI Assistant */
.approach-assistant {
    padding: 100px 20px;
}

.assistant-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.assistant-content h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 24px;
}

.assistant-content p:not(.lead-text) {
    font-size: 17px;
    color: #64748b;
    margin-bottom: 40px;
    line-height: 1.6;
}

.responsibility-box {
    background: #0b0d14;
    color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    text-align: left;
}

.responsibility-box p {
    font-size: 18px !important;
    font-weight: 700;
    color: #ffffff !important;
    margin-bottom: 24px !important;
}

.responsibility-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.responsibility-flow span {
    display: inline-block;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.responsibility-flow svg {
    color: var(--orange);
    flex-shrink: 0;
}

/* Why This Matters */
.approach-matters {
    padding: 100px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.approach-matters h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 24px;
}

.max-w-800 {
    max-width: 800px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

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

.equation-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.eq-item {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 24px 32px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

.eq-plus {
    font-size: 32px;
    font-weight: 900;
    color: var(--orange);
}

/* Workflow */
.approach-workflow {
    padding: 120px 20px;
    background: #0b0d14;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.approach-workflow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.approach-workflow .section-header h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #ffffff;
}

.approach-workflow .section-subtitle {
    font-size: 18px;
    color: #94a3b8;
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.workflow-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 32px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.workflow-step:hover {
    border-color: rgba(249, 115, 22, 0.4);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(249, 115, 22, 0.1);
}

.step-num {
    font-size: 56px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    line-height: 1;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.workflow-step:hover .step-num {
    color: var(--orange);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.step-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
}

.step-desc {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}

/* Conclusion */
.approach-conclusion {
    padding: 100px 20px;
    background: #0f172a;
    color: #ffffff;
}

.quote-text {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote-sub {
    font-size: 18px;
    color: #94a3b8;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    
    .split-8020 {
        grid-template-columns: 1fr;
    }
    
    .box-80 .check-list {
        grid-template-columns: 1fr;
    }
    
    .equation-box {
        gap: 16px;
    }
    
    .eq-item {
        width: 100%;
    }
}
/* ==================== QUOTE PAGE ==================== */

.quote-page {
    background: #f8fafc;
    min-height: 100vh;
    padding-bottom: 100px;
}

.quote-header {
    background: #0b0d14;
    color: #ffffff;
    padding: 120px 20px 80px;
    position: relative;
    overflow: hidden;
}

.quote-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.quote-header h1 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.quote-subtitle {
    font-size: 18px;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.quote-body {
    padding: 60px 20px;
    margin-top: -60px;
}

.quote-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.quote-form-wrapper {
    background: #ffffff;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    border: 1px solid #e2e8f0;
}

/* Premium Form Styling */
.premium-quote-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.premium-quote-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.premium-quote-form .form-row .form-group {
    margin-bottom: 0;
}

.premium-quote-form label {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}

.premium-quote-form .required {
    color: #ef4444;
}

.premium-quote-form input[type="text"],
.premium-quote-form input[type="email"],
.premium-quote-form input[type="tel"],
.premium-quote-form select,
.premium-quote-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 15px;
    color: #0f172a;
    background: #f8fafc;
    transition: all 0.3s ease;
    font-family: inherit;
}

.premium-quote-form input:focus,
.premium-quote-form select:focus,
.premium-quote-form textarea:focus {
    outline: none;
    border-color: var(--orange);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Custom Select */
.premium-quote-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Radio Group */
.radio-group {
    display: flex;
    gap: 24px;
    height: 100%;
    align-items: center;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600 !important;
    margin: 0 !important;
}

.radio-label input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}

.radio-label input[type="radio"]:checked + .radio-custom {
    border-color: var(--orange);
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--orange);
    border-radius: 50%;
}

/* File Upload */
.file-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.file-upload-label:hover {
    border-color: var(--orange);
    background: rgba(249, 115, 22, 0.02);
}

.file-upload-label svg {
    color: var(--orange);
    margin-bottom: 12px;
}

.file-upload-label .primary-text {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.file-upload-label .secondary-text {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
}

.file-input {
    display: none;
}

/* Form Actions */
.form-actions {
    margin-top: 32px;
}

.submit-btn {
    width: 100%;
    padding: 18px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Sidebar */
.quote-sidebar {
    height: max-content;
    position: sticky;
    top: 100px;
}

.sidebar-panel {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.04);
    border: 1px solid #e2e8f0;
}

.sidebar-panel h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 24px;
    color: #0f172a;
}

.next-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

.next-steps li {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
}

.next-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: -16px;
    width: 2px;
    background: #e2e8f0;
}

.step-icon {
    width: 36px;
    height: 36px;
    background: rgba(249, 115, 22, 0.1);
    color: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.step-text {
    font-size: 15px;
    color: #475569;
    font-weight: 500;
    padding-top: 8px;
    line-height: 1.5;
}

.sidebar-footer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.sidebar-footer span {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
}

/* Errors */
.form-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.form-errors ul {
    margin: 0;
    padding-left: 20px;
    color: #ef4444;
    font-size: 14px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .quote-container {
        grid-template-columns: 1fr;
    }
    
    .quote-sidebar {
        position: static;
    }
    
    .premium-quote-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   RS Orange Tech Homepage Redesign Custom Styles
   ========================================================================== */

/* Hero adjustments */
.premium-hero-copy h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
}

.hero-subheadline {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--muted);
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 16px;
}

.hero-subtext {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Trust Bar Section */
.trust-bar-section {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 60px 20px;
}

.trust-bar-container {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-bar-intro {
    flex: 1;
    min-width: 300px;
}

.trust-bar-intro h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 10px 0;
}

.trust-bar-intro p {
    color: var(--muted);
    font-size: 16px;
    margin: 0;
    max-width: 600px;
}

.trust-bar-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-stat-item {
    text-align: center;
    min-width: 120px;
}

.trust-stat-item .stat-num {
    font-size: 40px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 5px;
}

.trust-stat-item .stat-lbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-2);
}

/* Agency Partnership Section */
.agency-partnership-section {
    background: #fff;
    padding: 100px 20px;
}

.agency-partnership-container {
    max-width: var(--container);
    margin: 0 auto;
}

.partnership-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.partnership-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--navy);
    margin: 10px 0 20px 0;
    line-height: 1.2;
}

.partnership-sub {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.6;
}

.partnership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
}

.partnership-col {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partnership-col:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.col-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.col-icon {
    font-size: 28px;
}

.col-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

.col-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.col-list li {
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    line-height: 1.5;
}

.col-list li span {
    color: var(--green);
    font-weight: bold;
}

.you-handle-col {
    border-left: 4px solid var(--muted);
}

.we-handle-col {
    border-left: 4px solid var(--orange);
    background: #fafafc;
}

.partnership-action {
    text-align: center;
}

.action-note {
    margin-top: 15px;
    font-size: 14px;
    color: var(--muted);
}

/* Why Us Grid Section */
.why-us-grid-section {
    background: var(--soft);
    padding: 100px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.why-us-grid-container {
    max-width: var(--container);
    margin: 0 auto;
}

.why-us-grid-head {
    text-align: center;
    margin-bottom: 60px;
}

.why-us-grid-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--navy);
    margin-top: 10px;
}

.why-us-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.why-us-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.why-us-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: var(--orange);
}

.why-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(249, 115, 22, 0.1);
    color: var(--orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.why-us-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px 0;
}

.why-us-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Engagement Models Section */
.engagement-models-section {
    background: #fff;
    padding: 100px 20px;
}

.engagement-models-container {
    max-width: var(--container);
    margin: 0 auto;
}

.engagement-head {
    text-align: center;
    margin-bottom: 60px;
}

.engagement-head h2 {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--navy);
    margin-top: 10px;
}

.engagement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.engagement-card {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 35px;
    text-align: center;
    transition: all 0.3s ease;
}

.engagement-card:hover {
    transform: scale(1.02);
    border-color: var(--orange);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.engagement-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px 0;
}

.engagement-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.engagement-action {
    text-align: center;
}

/* AI Development Block */
.ai-development-block {
    background: var(--navy);
    color: #fff;
    padding: 80px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-development-container {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.ai-block-copy {
    flex: 1;
    min-width: 320px;
}

.ai-block-copy h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 10px 0 20px 0;
    line-height: 1.25;
}

.ai-block-copy p {
    font-size: 16px;
    color: #a0aec0;
    line-height: 1.65;
    margin: 0;
    max-width: 750px;
}

.ai-block-badge {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ai-badge-circle {
    width: 90px;
    height: 90px;
    background: rgba(249, 115, 22, 0.15);
    border: 2px solid var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
}

.ai-badge-circle span {
    font-size: 22px;
    font-weight: 800;
    color: var(--orange);
    letter-spacing: 1px;
}

.ai-badge-orbit {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 1px dashed rgba(249, 115, 22, 0.4);
    border-radius: 50%;
    animation: spin-orbit 15s linear infinite;
}

@keyframes spin-orbit {
    100% { transform: rotate(360deg); }
}

/* Portfolio adaptations */
.project-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.project-tag {
    color: var(--orange);
}

.project-type {
    background: rgba(9, 17, 31, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
    color: var(--navy-2);
}

/* CTA Actions */
.cta-actions {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* Responsiveness adjustments */
@media (max-width: 768px) {
    .trust-bar-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .trust-bar-stats {
        width: 100%;
        justify-content: space-between;
        gap: 20px;
    }
    .trust-stat-item {
        flex: 1;
        min-width: 90px;
    }
    .trust-stat-item .stat-num {
        font-size: 32px;
    }
    .agency-partnership-section {
        padding: 60px 20px;
    }
    .partnership-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .partnership-col {
        padding: 30px 20px;
    }
    .why-us-grid-section,
    .engagement-models-section {
        padding: 60px 20px;
    }
    .ai-development-block {
        padding: 60px 20px;
    }
    .ai-development-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    .ai-block-badge {
        align-self: center;
    }
}

/* ==========================================================================
   RS Orange Tech Agency Partners Landing Page Styles
   ========================================================================== */

/* Agency Hero Section */
.agency-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 120px max(20px, calc((100vw - var(--container)) / 2));
    background: var(--navy);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.agency-hero-copy {
    flex: 1;
    max-width: 650px;
}

.agency-hero-copy h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
    font-weight: 800;
    line-height: 1.15 !important;
    margin: 15px 0 20px 0;
    color: #fff !important;
}

.agency-hero-copy .hero-subheadline {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--orange);
    margin-bottom: 20px;
}

.agency-hero-copy .hero-description {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin-bottom: 35px;
}

.agency-hero-copy .trust-bullets {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
}

/* Hero Pipeline Card Visual */
.agency-hero-visual {
    flex: 1;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pipeline-card {
    background: var(--navy-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.pipeline-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.pipeline-step:hover {
    transform: translateY(-3px);
    border-color: rgba(249, 115, 22, 0.4);
}

.pipeline-step h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 10px 0 5px 0;
    color: #fff;
}

.pipeline-step p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.pipeline-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--orange);
    font-weight: 700;
    font-size: 13px;
    gap: 2px;
}

.connector-arrow {
    transform: rotate(90deg);
    font-size: 18px;
}

.connector-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #64748b;
}

/* Core Message Section */
.core-message-section {
    background: #fff;
    padding: 100px 20px;
}

.core-message-container {
    max-width: var(--container);
    margin: 0 auto;
}

.section-head {
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.section-head h2 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--navy);
    margin: 10px 0 20px 0;
    line-height: 1.25;
}

.section-subtext {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.6;
}

.core-message-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.core-card {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.core-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
}

.core-card-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 20px;
}

.core-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 15px 0;
}

.core-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Why Agencies Section */
.why-agencies-section {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 100px 20px;
}

.why-agencies-container {
    max-width: var(--container);
    margin: 0 auto;
}

.why-agencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 35px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.benefit-icon {
    font-size: 32px;
    margin-bottom: 20px;
    display: inline-block;
}

.benefit-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px 0;
}

.benefit-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Agency Services Section */
.agency-services-section {
    background: #fff;
    padding: 100px 20px;
}

.agency-services-container {
    max-width: var(--container);
    margin: 0 auto;
}

.agency-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.as-card {
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
}

.as-card:hover {
    background: #fff;
    border-color: var(--orange);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.as-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 20px 0;
    border-bottom: 2px solid var(--line);
    padding-bottom: 10px;
}

.as-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.as-card li {
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.4;
}

.as-card li::before {
    content: "➔";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 11px;
}

/* Timeline/Roadmap Section */
.partnership-timeline-section {
    background: var(--soft);
    padding: 100px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.partnership-timeline-container {
    max-width: var(--container);
    margin: 0 auto;
}

.timeline-wrapper {
    position: relative;
    margin-top: 80px;
    padding: 20px 0;
}

.timeline-line {
    position: absolute;
    top: 36px;
    left: 50px;
    right: 50px;
    height: 4px;
    background: var(--line);
    z-index: 1;
}

.timeline-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 30px;
}

.timeline-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
}

.timeline-step-item .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 4px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.timeline-step-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 10px 0;
}

.timeline-step-item p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    max-width: 200px;
}

/* White-Label Workflow Flowchart Diagram */
.white-label-workflow-section {
    background: #fff;
    padding: 100px 20px;
}

.wl-workflow-container {
    max-width: var(--container);
    margin: 0 auto;
}

.workflow-flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 60px;
    flex-wrap: wrap;
}

.flow-step {
    flex: 1;
    min-width: 180px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.flow-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-step p {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.flow-connector {
    color: var(--orange);
    font-size: 24px;
    font-weight: bold;
}

/* Who We Work With Grid */
.who-we-work-with {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 100px 20px;
}

.www-container {
    max-width: var(--container);
    margin: 0 auto;
}

.www-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.www-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 40px;
    transition: transform 0.3s ease;
}

.www-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
}

.www-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 15px 0;
}

.www-card p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Onboarding Scope Section */
.onboarding-scope-section {
    background: #fff;
    padding: 100px 20px;
}

.onboarding-scope-container {
    max-width: var(--container);
    margin: 0 auto;
}

.scope-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 45px;
}

.scope-item {
    background: var(--soft);
    border: 1px solid var(--line);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-2);
    transition: all 0.2s ease;
}

.scope-item:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}

/* FAQ Layout styling */
.faq-container-section {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 100px 20px;
}

.faq-inner-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-list-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px;
}

.faq-item h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 12px 0;
}

.faq-item p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Partnership Request Form Section */
.partnership-form-section {
    background: #fff;
    padding: 100px 20px;
}

.partnership-form-container {
    max-width: 800px;
    margin: 0 auto;
}

.b2b-partnership-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 50px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 40px;
}

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

.b2b-partnership-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.b2b-partnership-form .form-group.full-width {
    grid-column: span 2;
}

.b2b-partnership-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-2);
}

.b2b-partnership-form label .required {
    color: #ef4444;
}

.b2b-partnership-form label .label-hint {
    font-weight: normal;
    color: var(--muted);
    font-size: 11px;
}

.b2b-partnership-form input[type="text"],
.b2b-partnership-form input[type="email"],
.b2b-partnership-form input[type="url"],
.b2b-partnership-form select,
.b2b-partnership-form textarea {
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s ease;
}

.b2b-partnership-form input:focus,
.b2b-partnership-form select:focus,
.b2b-partnership-form textarea:focus {
    border-color: var(--orange);
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500 !important;
}

.checkbox-item input {
    accent-color: var(--orange);
    width: 16px;
    height: 16px;
}

.form-submit button {
    width: 100%;
    padding: 15px;
    font-weight: bold;
    justify-content: center;
}

/* Success & Error alerts */
.alert-success-notification {
    background: #ecfdf5;
    border: 1px solid #10b981;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-success-notification .alert-icon {
    color: #10b981;
    font-weight: bold;
    font-size: 20px;
}

.alert-success-notification p {
    margin: 0;
    font-size: 14px;
    color: #065f46;
    font-weight: 600;
}

.alert-error-notification {
    background: #fef2f2;
    border: 1px solid #f87171;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
}

.alert-error-notification .alert-icon {
    color: #ef4444;
    font-weight: bold;
    font-size: 20px;
}

.alert-error-notification strong {
    color: #991b1b;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.alert-error-notification ul {
    margin: 0;
    padding-left: 20px;
    color: #b91c1c;
    font-size: 13px;
}

/* Utilities */
.text-center { text-align: center; }
.font-sm { font-size: 13px !important; }

/* Responsive adjustments */
@media (max-width: 991px) {
    .agency-hero {
        flex-direction: column;
        padding: 80px 20px;
        gap: 40px;
        text-align: center;
    }
    .agency-hero-copy {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .agency-hero-copy .trust-bullets {
        justify-content: center;
    }
    .agency-hero-visual {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .timeline-line {
        display: none;
    }
    .timeline-steps {
        flex-direction: column;
        gap: 40px;
    }
    .timeline-step-item {
        align-items: center;
    }
    .timeline-step-item .step-num {
        margin-bottom: 12px;
    }
    .workflow-flow-diagram {
        flex-direction: column;
        gap: 15px;
    }
    .flow-connector {
        transform: rotate(90deg);
        margin: 5px 0;
    }
    .flow-step {
        width: 100%;
    }
    .b2b-partnership-form {
        padding: 24px 20px;
    }
    .b2b-partnership-form .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .b2b-partnership-form .form-group.full-width {
        grid-column: span 1;
    }
}