/*
 * Site Ninjas homepage polish
 * A visual refinement layer for index.html. The existing brand, content and
 * interactions remain intact; this file standardises rhythm and hierarchy.
 */

:root {
    --home-ink: #111111;
    --home-muted: #65635f;
    --home-sand: #f4f2ee;
    --home-sand-deep: #ebe7df;
    --home-paper: rgba(255, 255, 255, 0.82);
    --home-line: rgba(17, 17, 17, 0.09);
    --home-yellow: #fef7af;
    --home-gold: #fecd1a;
    --home-coral: #f7a49e;
    --home-blue: #84e6f6;
    --home-shadow-sm: 0 12px 34px rgba(47, 40, 24, 0.06);
    --home-shadow-lg: 0 32px 90px rgba(47, 40, 24, 0.11);
    --home-radius: 32px;
}

main > section,
.pricing-hub-zone section {
    scroll-margin-top: 104px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    color: rgba(17, 17, 17, 0.55);
    font-family: "Albert Sans", sans-serif;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.section-kicker::before {
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--home-gold);
    content: "";
}

/* Header and hero */
header[data-kite-global="site-header"] nav {
    border-color: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 14px 40px rgba(32, 27, 17, 0.08), 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

#about {
    padding-top: 148px !important;
    padding-bottom: 92px !important;
}

#about::before {
    position: absolute;
    z-index: -1;
    top: 70px;
    right: -8%;
    width: 58%;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 247, 175, 0.36), rgba(132, 230, 246, 0.08) 48%, transparent 72%);
    filter: blur(20px);
    content: "";
    pointer-events: none;
}

#about .section-container {
    max-width: 1240px;
    gap: clamp(52px, 7vw, 96px) !important;
}

#about .hero-title {
    max-width: 650px;
    text-wrap: balance;
}

#about .premium-subtitle {
    max-width: 620px;
    color: rgba(17, 17, 17, 0.56) !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
}

#about [data-editable="hero-desc"] {
    max-width: 660px;
    color: rgba(17, 17, 17, 0.68);
    line-height: 1.65;
}

#about [data-editable="hero-trust-title"],
#about [data-editable="hero-trust-subtitle"] {
    margin-bottom: 0;
}

/* Service index */
.service-index-section {
    position: relative;
    z-index: 12;
    padding: 82px 0 70px;
}

.service-index-shell {
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 38px;
    background: rgba(250, 249, 246, 0.76);
    box-shadow: var(--home-shadow-sm);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.service-index-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
    gap: 48px;
    align-items: end;
    padding: 34px 34px 28px;
}

.service-index-heading > div {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.service-index-heading h2,
.pricing-hub-copy h2,
.testimonial-heading h2 {
    margin: 0;
    color: var(--home-ink);
    font-family: "Albert Sans", sans-serif;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 430;
    letter-spacing: -0.048em;
    line-height: 1.02;
    text-wrap: balance;
}

.service-index-heading p {
    max-width: 470px;
    margin: 0;
    color: var(--home-muted);
    font-size: 16px;
    letter-spacing: -0.015em;
    line-height: 1.55;
}

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

.service-index-card {
    position: relative;
    display: flex;
    min-height: 255px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 27px;
    color: var(--home-ink);
    flex-direction: column;
    text-decoration: none;
    transform: translateY(0);
    transition: transform 350ms cubic-bezier(.2, .8, .2, 1), box-shadow 350ms ease, border-color 350ms ease;
}

.service-index-card::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 54px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    border-left: 1px solid rgba(17, 17, 17, 0.12);
    border-bottom-left-radius: 40px;
    background: rgba(255, 255, 255, 0.4);
    content: "";
}

.service-index-card:hover {
    z-index: 2;
    border-color: rgba(17, 17, 17, 0.22);
    box-shadow: 0 24px 50px rgba(44, 36, 19, 0.12);
    transform: translateY(-7px);
}

.service-index-card--yellow {
    background: linear-gradient(145deg, #fffbd8, var(--home-yellow));
}

.service-index-card--coral {
    background: linear-gradient(145deg, #ffd8d3, var(--home-coral));
}

.service-index-card--blue {
    background: linear-gradient(145deg, #c8f5fc, var(--home-blue));
}

.service-index-card--gold {
    background: linear-gradient(145deg, #fff5ae, #f9d84f);
}

.service-index-number {
    color: rgba(17, 17, 17, 0.45);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.service-index-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 24px 0 20px;
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.46);
}

.service-index-card strong {
    margin-bottom: 7px;
    font-family: "Albert Sans", sans-serif;
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -0.03em;
}

.service-index-card > span:not(.service-index-number, .service-index-icon, .service-index-link) {
    color: rgba(17, 17, 17, 0.64);
    font-size: 14px;
    line-height: 1.4;
}

.service-index-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
    color: var(--home-ink);
    font-size: 13px;
    font-weight: 650;
}

/* Problem cards and strategic foundation */
#headache {
    padding-top: 100px !important;
    padding-bottom: 112px !important;
}

#headache .section-container > .grid > div {
    border: 1px solid rgba(17, 17, 17, 0.07) !important;
    box-shadow: 0 10px 30px rgba(47, 40, 24, 0.045);
}

#why-us {
    position: relative;
    padding-top: 120px !important;
    padding-bottom: 94px !important;
}

#why-us::before {
    position: absolute;
    z-index: -1;
    inset: 28px 20px;
    border: 1px solid rgba(17, 17, 17, 0.055);
    border-radius: 48px;
    background:
        radial-gradient(circle at 13% 20%, rgba(254, 205, 26, 0.09), transparent 28%),
        radial-gradient(circle at 90% 75%, rgba(132, 230, 246, 0.1), transparent 31%),
        rgba(255, 255, 255, 0.28);
    content: "";
}

#why-us [data-editable="why-us-title"] {
    font-size: clamp(42px, 4.5vw, 60px) !important;
    letter-spacing: -0.05em !important;
}

#why-us [data-editable="why-us-desc"] {
    max-width: 720px !important;
    margin-bottom: 48px !important;
}

#why-us .pillars-grid {
    gap: 10px !important;
}

#why-us .pillars-grid > div {
    min-height: 276px !important;
    border-color: rgba(17, 17, 17, 0.075) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 10px 28px rgba(47, 40, 24, 0.055) !important;
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), box-shadow 320ms ease !important;
}

#why-us .pillars-grid > div:hover {
    box-shadow: 0 22px 48px rgba(47, 40, 24, 0.11) !important;
    transform: translateY(-6px) !important;
}

#why-us .pillars-grid > div:nth-child(1) > div:first-of-type > div:first-child,
#why-us .pillars-grid > div:nth-child(6) > div:first-of-type > div:first-child {
    background: rgba(254, 205, 26, 0.13) !important;
}

#why-us .pillars-grid > div:nth-child(2) > div:first-of-type > div:first-child {
    background: rgba(34, 197, 94, 0.1) !important;
}

#why-us .pillars-grid > div:nth-child(3) > div:first-of-type > div:first-child {
    background: rgba(132, 230, 246, 0.22) !important;
}

#why-us .pillars-grid > div:nth-child(4) > div:first-of-type > div:first-child {
    background: rgba(168, 85, 247, 0.09) !important;
}

#why-us .pillars-grid > div:nth-child(5) > div:first-of-type > div:first-child {
    background: rgba(247, 164, 158, 0.16) !important;
}

#why-us .process-cards {
    gap: 12px !important;
}

#why-us .process-cards > div {
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 27px !important;
    box-shadow: 0 14px 34px rgba(47, 40, 24, 0.06);
}

/* Capabilities */
#features {
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}

#features [data-editable="features-title"] {
    font-size: clamp(42px, 4.5vw, 60px) !important;
    text-wrap: balance;
}

#features .section-container > .text-center:first-child {
    margin-bottom: 46px !important;
}

#features .section-container > .text-center:first-child > div {
    display: inline-flex;
    width: fit-content;
    align-self: center;
    padding: 8px 13px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: rgba(17, 17, 17, 0.68);
    font-size: 13px;
}

#features .features-nav-container {
    padding: 7px !important;
    border: 1px solid rgba(17, 17, 17, 0.07);
    background: rgba(234, 230, 222, 0.82) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 10px 30px rgba(47, 40, 24, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#features .feature-tab-btn {
    min-width: 0;
    height: 58px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

#features .feature-tab-btn.active {
    border-color: rgba(17, 17, 17, 0.05) !important;
    box-shadow: 0 9px 24px rgba(47, 40, 24, 0.09) !important;
}

#features .feature-tabs-wrapper {
    margin-top: 16px !important;
}

#features .feature-content-block {
    border-color: rgba(17, 17, 17, 0.07) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, 0.91) !important;
    box-shadow: 0 25px 70px rgba(47, 40, 24, 0.075) !important;
}

#features .tab-visual-container {
    border-radius: 23px !important;
}

/* Unified pricing hub */
.pricing-hub-zone {
    position: relative;
    padding: 108px 0 88px;
    overflow: clip;
    border-top: 1px solid rgba(17, 17, 17, 0.07);
    border-bottom: 1px solid rgba(17, 17, 17, 0.07);
    background:
        radial-gradient(circle at 10% 10%, rgba(254, 247, 175, 0.3), transparent 25%),
        radial-gradient(circle at 92% 36%, rgba(132, 230, 246, 0.18), transparent 24%),
        rgba(235, 231, 223, 0.45);
}

.pricing-hub-intro {
    padding: 0 0 34px !important;
}

.pricing-hub-header {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(540px, 1.12fr);
    gap: clamp(52px, 7vw, 100px);
    align-items: center;
}

.pricing-hub-copy {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.pricing-hub-copy p {
    max-width: 530px;
    margin: 0;
    color: var(--home-muted);
    font-size: 18px;
    line-height: 1.6;
}

.stack-builder {
    padding: 20px;
    border: 1px solid rgba(17, 17, 17, 0.13);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--home-shadow-sm);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.stack-builder-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 6px 6px 18px;
}

.stack-builder-topline > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stack-builder-label {
    color: rgba(17, 17, 17, 0.46);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stack-builder-topline strong {
    font-family: "Albert Sans", sans-serif;
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -0.025em;
}

.stack-count {
    padding: 7px 11px;
    border: 1px solid var(--home-line);
    border-radius: 999px;
    background: white;
    color: rgba(17, 17, 17, 0.58);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.stack-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stack-option {
    position: relative;
    display: flex;
    min-height: 62px;
    padding: 11px 14px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--home-ink);
    align-items: center;
    gap: 11px;
    font-family: "Geist", sans-serif;
    font-size: 14px;
    font-weight: 620;
    text-align: left;
    cursor: pointer;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.stack-option::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-bottom-left-radius: 24px;
    content: "";
    opacity: 0.82;
}

.stack-option--yellow::after {
    background: var(--home-yellow);
}

.stack-option--coral::after {
    background: var(--home-coral);
}

.stack-option--blue::after {
    background: var(--home-blue);
}

.stack-option--gold::after {
    background: var(--home-gold);
}

.stack-option:hover {
    border-color: rgba(17, 17, 17, 0.23);
    transform: translateY(-2px);
}

.stack-option[aria-pressed="true"] {
    border-color: rgba(17, 17, 17, 0.6);
    background: white;
    box-shadow: 0 8px 20px rgba(47, 40, 24, 0.08);
}

.stack-check {
    position: relative;
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(17, 17, 17, 0.26);
    border-radius: 50%;
}

.stack-option[aria-pressed="true"] .stack-check {
    border-color: var(--home-ink);
    background: var(--home-ink);
}

.stack-option[aria-pressed="true"] .stack-check::after {
    width: 8px;
    height: 4px;
    border-bottom: 1.7px solid white;
    border-left: 1.7px solid white;
    content: "";
    transform: translateY(-1px) rotate(-45deg);
}

.stack-builder-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
    padding: 15px 16px 4px;
    border-top: 1px solid var(--home-line);
}

.stack-builder-summary p {
    margin: 0;
    color: rgba(17, 17, 17, 0.56);
    font-size: 12px;
    line-height: 1.4;
}

.stack-cta {
    display: inline-flex;
    min-height: 39px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--home-ink);
    color: white;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.stack-cta:hover {
    background: #2a2a2a;
    transform: translateY(-1px);
}

.pricing-family-nav {
    position: sticky;
    z-index: 30;
    top: 94px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 52px;
    padding: 7px;
    border: 1px solid rgba(17, 17, 17, 0.09);
    border-radius: 22px;
    background: rgba(250, 249, 246, 0.86);
    box-shadow: 0 14px 38px rgba(47, 40, 24, 0.09);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.pricing-family-nav a {
    display: flex;
    min-height: 50px;
    padding: 12px 17px;
    border-radius: 16px;
    color: rgba(17, 17, 17, 0.64);
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 650;
    transition: background 220ms ease, color 220ms ease;
}

.pricing-family-nav a:hover,
.pricing-family-nav a:focus-visible {
    background: white;
    color: var(--home-ink);
}

.pricing-family-nav a span {
    color: rgba(17, 17, 17, 0.32);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.pricing-family {
    scroll-margin-top: 176px !important;
}

/* Website build pricing */
#pricing {
    padding-top: 30px !important;
    padding-bottom: 72px !important;
}

#pricing > .px-5 {
    max-width: 1340px;
    margin: 0 auto;
}

#pricing > .px-5 > div {
    padding: clamp(42px, 5vw, 72px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 42px !important;
    box-shadow: 0 40px 110px rgba(12, 12, 12, 0.2);
}

#pricing > .px-5 > div::after {
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 41px;
    content: "";
    pointer-events: none;
}

#pricing [data-editable="pricing-section-title"] {
    max-width: 420px;
    font-size: clamp(40px, 4.3vw, 58px) !important;
    letter-spacing: -0.05em !important;
}

#pricing .price-tab-btn {
    min-height: 82px;
    padding: 15px 17px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
}

#pricing .price-tab-btn.active {
    border-color: rgba(254, 247, 175, 0.3) !important;
    background: var(--home-yellow) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
}

#pricing .price-tab-btn.active h6,
#pricing .price-tab-btn.active p,
#pricing .price-tab-btn.active .price-tab-arrow {
    color: var(--home-ink) !important;
}

#pricing .price-tab-btn h6 {
    font-family: "Albert Sans", sans-serif;
    font-weight: 600 !important;
}

#pricing .price-tab-btn p {
    max-width: 360px;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

#pricing .plan-card-premium {
    padding: 30px !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25) !important;
}

#pricing [data-price-content] .items-baseline {
    align-items: flex-start !important;
    flex-direction: column;
}

#pricing [data-price-content] .items-baseline > span:first-child {
    font-size: clamp(38px, 4vw, 50px) !important;
}

#pricing [data-price-content] .items-baseline > span:last-child {
    max-width: 280px;
    font-size: 13px !important;
    line-height: 1.4;
}

#pricing [data-price-content] li {
    align-items: flex-start !important;
}

#pricing [data-price-content] li svg {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* SEO and marketing pricing */
#growth-addons {
    padding-top: 74px !important;
    padding-bottom: 80px !important;
}

#growth-addons > .section-container > .flex:first-child,
#hosting-plans > div > .flex:first-child {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 1.22fr);
    gap: 12px 76px !important;
    align-items: end !important;
    margin-bottom: 46px !important;
    text-align: left !important;
}

#growth-addons > .section-container > .flex:first-child > div:first-child,
#hosting-plans > div > .flex:first-child > div:first-child {
    grid-column: 1;
    justify-self: start;
}

#growth-addons > .section-container > .flex:first-child > h2,
#hosting-plans > div > .flex:first-child > h2 {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-self: start;
    font-size: clamp(38px, 4vw, 54px) !important;
    letter-spacing: -0.05em !important;
    text-wrap: balance;
}

#growth-addons > .section-container > .flex:first-child > p,
#hosting-plans > div > .flex:first-child > p {
    grid-column: 2;
    max-width: 650px !important;
    margin: 0 !important;
}

#growth-addons > .section-container > .grid {
    gap: 15px !important;
}

#growth-addons > .section-container > .grid > div {
    padding: 30px !important;
    border-color: rgba(17, 17, 17, 0.09) !important;
    border-radius: 29px !important;
    box-shadow: 0 12px 34px rgba(47, 40, 24, 0.06) !important;
    transform: none !important;
}

#growth-addons > .section-container > .grid > div:hover {
    border-color: rgba(17, 17, 17, 0.16) !important;
    box-shadow: 0 26px 64px rgba(47, 40, 24, 0.11) !important;
    transform: translateY(-4px) !important;
}

#growth-addons > .section-container > .grid > div > .flex {
    gap: 22px !important;
}

#growth-addons h3 {
    font-size: 25px !important;
    font-weight: 560 !important;
}

#growth-addons .growth-feature-panel {
    position: relative;
    max-height: 340px;
    overflow: hidden;
    transition: max-height 520ms cubic-bezier(.2, .8, .2, 1);
}

#growth-addons .growth-feature-panel::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 94px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.98));
    content: "";
    pointer-events: none;
    transition: opacity 220ms ease;
}

#growth-addons .features-expanded .growth-feature-panel {
    max-height: 1250px;
}

#growth-addons .features-expanded .growth-feature-panel::after {
    opacity: 0;
}

.growth-feature-toggle {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 10px 14px 10px 17px;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 15px;
    background: rgba(244, 242, 238, 0.72);
    color: var(--home-ink);
    font-family: "Geist", sans-serif;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.growth-feature-toggle:hover {
    border-color: rgba(17, 17, 17, 0.2);
    background: white;
}

.growth-toggle-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    font-size: 17px;
    font-weight: 400;
}

/* Hosting and NinjaCMS */
#hosting-plans {
    max-width: 1300px;
    margin: 0 auto 0 !important;
    padding-top: 74px !important;
    padding-bottom: 78px !important;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 40px !important;
    background: rgba(250, 249, 246, 0.72) !important;
    box-shadow: var(--home-shadow-sm);
}

#hosting-plans > div {
    max-width: 1180px !important;
    padding-right: 60px !important;
    padding-left: 60px !important;
}

#hosting-plans > div > .grid {
    gap: 14px !important;
}

#hosting-plans > div > .grid > div {
    min-height: 570px !important;
    padding: 28px !important;
    border-color: rgba(17, 17, 17, 0.09) !important;
    border-radius: 27px !important;
    box-shadow: 0 11px 30px rgba(47, 40, 24, 0.055) !important;
    transform: none !important;
}

#hosting-plans > div > .grid > div:hover {
    border-color: rgba(17, 17, 17, 0.18) !important;
    box-shadow: 0 25px 58px rgba(47, 40, 24, 0.1) !important;
    transform: translateY(-5px) !important;
}

#hosting-plans > div > .grid > div:nth-child(2) {
    border-color: rgba(254, 205, 26, 0.42) !important;
    box-shadow: 0 20px 50px rgba(254, 205, 26, 0.1) !important;
}

/* Work, testimonials, FAQ and final CTA */
#work {
    padding-top: 124px !important;
    padding-bottom: 100px !important;
}

#work > div > .flex:first-child {
    margin-bottom: 68px !important;
}

#work > div > .flex:last-child {
    gap: 84px !important;
}

#work > div > .flex:last-child > div {
    padding: 24px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.38);
}

#testimonials {
    padding-top: 92px !important;
    padding-bottom: 116px !important;
}

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

.testimonial-heading .section-kicker {
    position: absolute;
    transform: translateY(-72px);
}

.testimonial-heading h2 {
    max-width: 620px;
}

.testimonial-heading p {
    max-width: 430px;
    margin: 0;
    color: var(--home-muted);
    font-size: 16px;
    line-height: 1.55;
}

#testimonials .animate-marquee > div {
    border: 1px solid rgba(17, 17, 17, 0.07);
    box-shadow: 0 16px 42px rgba(47, 40, 24, 0.07) !important;
}

#faq {
    padding-top: 104px !important;
    padding-bottom: 110px !important;
    border-top: 1px solid rgba(17, 17, 17, 0.055);
}

#faq .faq-item {
    border: 1px solid rgba(17, 17, 17, 0.055);
}

#contact {
    padding-top: 64px !important;
    padding-bottom: 70px !important;
}

#contact > .px-5 > div {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px !important;
    box-shadow: 0 38px 100px rgba(12, 12, 12, 0.22);
}

/* Focus visibility */
.service-index-card:focus-visible,
.stack-option:focus-visible,
.stack-cta:focus-visible,
.pricing-family-nav a:focus-visible,
.growth-feature-toggle:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.8);
    outline-offset: 3px;
}

@media (max-width: 1100px) {
    .service-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-index-card {
        min-height: 225px;
    }

    .pricing-hub-header {
        grid-template-columns: 1fr;
    }

    .pricing-hub-copy {
        max-width: 760px;
    }

    #features .features-nav-container {
        overflow-x: auto;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }

    #features .features-nav-container::-webkit-scrollbar {
        display: none;
    }

    #features .feature-tab-btn {
        flex: 0 0 auto !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #growth-addons > .section-container > .flex:first-child,
    #hosting-plans > div > .flex:first-child {
        grid-template-columns: 1fr;
        gap: 14px !important;
    }

    #growth-addons > .section-container > .flex:first-child > *,
    #hosting-plans > div > .flex:first-child > * {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

@media (max-width: 767px) {
    #about {
        padding-top: 124px !important;
        padding-bottom: 64px !important;
    }

    #about .section-container {
        gap: 44px !important;
    }

    #about .hero-title {
        font-size: 42px !important;
        line-height: 1.03 !important;
    }

    #about .flex.flex-col.gap-10 {
        gap: 30px !important;
    }

    #about .mt-12 {
        margin-top: 22px !important;
    }

    .service-index-section {
        padding-top: 56px !important;
        padding-bottom: 54px !important;
    }

    .service-index-shell {
        padding: 8px;
        border-radius: 28px;
    }

    .service-index-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 18px 26px;
    }

    .service-index-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-index-card {
        min-height: 190px;
        padding: 21px;
    }

    .service-index-icon {
        margin: 18px 0 16px;
    }

    #headache,
    #why-us,
    #features,
    #work,
    #testimonials,
    #faq {
        padding-top: 74px !important;
        padding-bottom: 74px !important;
    }

    #why-us::before {
        inset: 12px 10px;
        border-radius: 32px;
    }

    #why-us .pillars-grid > div {
        min-height: 230px !important;
    }

    #features .section-container > .text-center:first-child > div {
        border: 0;
        background: transparent;
        text-align: center;
    }

    .pricing-hub-zone {
        padding-top: 76px;
        padding-bottom: 54px;
    }

    .pricing-hub-intro {
        padding-top: 0 !important;
        padding-bottom: 18px !important;
    }

    .pricing-hub-header {
        gap: 38px;
    }

    .stack-builder {
        padding: 15px;
        border-radius: 24px;
    }

    .stack-options {
        grid-template-columns: 1fr;
    }

    .stack-builder-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .stack-cta {
        width: 100%;
        justify-content: space-between;
    }

    .pricing-family-nav {
        top: 82px;
        display: flex;
        margin-top: 34px;
        overflow-x: auto;
        border-radius: 18px;
        scrollbar-width: none;
    }

    .pricing-family-nav::-webkit-scrollbar {
        display: none;
    }

    .pricing-family-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #pricing {
        padding-top: 18px !important;
        padding-bottom: 54px !important;
    }

    #pricing > .px-5 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #pricing > .px-5 > div {
        padding: 29px 20px !important;
        border-radius: 30px !important;
    }

    #pricing > .px-5 > div::after {
        border-radius: 29px;
    }

    #pricing .price-tab-btn {
        min-height: 70px;
    }

    #pricing .plan-card-premium {
        padding: 24px !important;
    }

    #growth-addons,
    #hosting-plans {
        padding-top: 62px !important;
        padding-bottom: 62px !important;
    }

    #growth-addons > .section-container > .flex:first-child,
    #hosting-plans > div > .flex:first-child {
        margin-bottom: 34px !important;
    }

    #growth-addons > .section-container > .grid > div {
        padding: 23px !important;
    }

    #growth-addons > .section-container > .grid > div > .flex {
        gap: 18px !important;
    }

    #growth-addons .growth-feature-panel {
        max-height: 315px;
    }

    #hosting-plans {
        margin-right: 10px !important;
        margin-left: 10px !important;
        border-radius: 30px !important;
    }

    #hosting-plans > div {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #hosting-plans > div > .grid > div {
        min-height: 0 !important;
    }

    #work > div > .flex:last-child > div {
        padding: 15px;
        border-radius: 26px;
    }

    .testimonial-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 42px;
    }

    .testimonial-heading .section-kicker {
        position: static;
        transform: none;
    }

    #testimonials .animate-marquee > div {
        width: 315px !important;
        padding: 28px !important;
    }

    #testimonials .animate-marquee > div p {
        font-size: 17px !important;
    }

    #faq .faq-item {
        padding: 24px !important;
    }

    #contact {
        padding-top: 42px !important;
        padding-bottom: 48px !important;
    }

    #contact > .px-5 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #contact > .px-5 > div {
        padding: 34px 22px !important;
        border-radius: 30px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-index-card,
    .stack-option,
    #why-us .pillars-grid > div,
    #growth-addons > .section-container > .grid > div,
    #hosting-plans > div > .grid > div {
        transition: none !important;
    }

    #testimonials .animate-marquee {
        animation-play-state: paused !important;
    }
}

/* ========================================================================== */
/* Final homepage refinement: navigation, hero system, reviews, CTA + footer  */
/* ========================================================================== */

/* Navigation */
header[data-kite-global="site-header"] {
    top: 16px !important;
    max-width: 1160px !important;
    padding-inline: 18px !important;
    transition: top 320ms cubic-bezier(.16, 1, .3, 1), max-width 320ms cubic-bezier(.16, 1, .3, 1);
}

header[data-kite-global="site-header"] nav {
    height: 66px !important;
    padding: 0 10px 0 18px !important;
    border: 1px solid rgba(17, 17, 17, 0.075) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 16px 48px rgba(42, 36, 23, 0.1), inset 0 1px 0 rgba(255,255,255,.8) !important;
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

header[data-kite-global="site-header"].is-scrolled {
    top: 10px !important;
    max-width: 1080px !important;
}

header[data-kite-global="site-header"].is-scrolled nav {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 50px rgba(42, 36, 23, 0.14), inset 0 1px 0 white !important;
}

header[data-kite-global="site-header"] nav > a:first-child {
    display: flex;
    min-width: 148px;
    align-items: center;
}

header[data-kite-global="site-header"] .nav-link {
    position: relative;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    color: rgba(17, 17, 17, 0.68);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -0.01em;
    transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

header[data-kite-global="site-header"] a.nav-link[href="index.html"] {
    background: rgba(17, 17, 17, 0.055);
    color: var(--home-ink);
}

header[data-kite-global="site-header"] .nav-link:hover,
header[data-kite-global="site-header"] .nav-link:focus-visible {
    background: rgba(17, 17, 17, 0.055);
    color: var(--home-ink);
    transform: translateY(-1px);
}

header[data-kite-global="site-header"] .nav-link:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.55);
    outline-offset: 2px;
}

header[data-kite-global="site-header"] .btn-premium-black {
    min-height: 46px !important;
    padding: 6px 7px 6px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.16);
}

header[data-kite-global="site-header"] .mega-menu {
    top: calc(100% + 8px);
    padding: 12px !important;
    border: 1px solid rgba(17, 17, 17, 0.08) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 28px 70px rgba(37, 31, 21, 0.16) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

header[data-kite-global="site-header"] .mega-menu-link {
    padding: 12px !important;
    border: 1px solid transparent;
    border-radius: 16px !important;
    transition: background 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1);
}

header[data-kite-global="site-header"] .mega-menu-link:hover {
    border-color: rgba(17, 17, 17, 0.065);
    background: #f7f5f1 !important;
    transform: translateY(-2px);
}

/* Original structured-system hero artwork */
#about {
    min-height: 820px !important;
    padding-top: 144px !important;
    padding-bottom: 76px !important;
}

#about .section-container {
    grid-template-columns: minmax(500px, .96fr) minmax(570px, 1.04fr) !important;
    gap: clamp(52px, 5vw, 88px) !important;
}

#about .hero-title {
    max-width: 700px;
    font-size: clamp(56px, 4.65vw, 74px) !important;
    line-height: .99 !important;
    letter-spacing: -.055em !important;
}

.hero-system-showcase {
    position: relative;
    width: 100%;
    min-height: 580px;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 44px;
    background:
        radial-gradient(circle at 74% 20%, rgba(132, 230, 246, .25), transparent 28%),
        radial-gradient(circle at 20% 82%, rgba(254, 205, 26, .17), transparent 32%),
        rgba(239, 236, 229, .72);
    box-shadow: 0 40px 100px rgba(43, 36, 24, .12), inset 0 1px 0 rgba(255,255,255,.78);
    isolation: isolate;
}

.hero-system-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 17, .042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, .042) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(145deg, #000 24%, transparent 88%);
}

.hero-system-status {
    position: absolute;
    z-index: 5;
    top: 26px;
    right: 28px;
    display: flex;
    padding: 9px 13px;
    border: 1px solid rgba(17,17,17,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(41,33,22,.08);
    color: rgba(17,17,17,.56);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero-system-status i,
.hero-metric-head strong i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18b56b;
    box-shadow: 0 0 0 4px rgba(24,181,107,.11);
}

.hero-system-card,
.hero-metric-card {
    position: absolute;
    border: 1px solid rgba(17,17,17,.075);
    background: rgba(255,255,255,.94);
    box-shadow: 0 34px 75px rgba(45,37,25,.15), inset 0 1px 0 white;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 600ms cubic-bezier(.16,1,.3,1), box-shadow 600ms ease;
}

.hero-system-card {
    z-index: 2;
    top: 60px;
    left: 34px;
    width: min(67%, 440px);
    min-height: 430px;
    padding: 30px 28px 24px;
    border-radius: 30px;
    transform: rotate(-2.4deg);
}

.hero-system-card:hover {
    transform: rotate(-.7deg) translateY(-7px);
    box-shadow: 0 44px 88px rgba(45,37,25,.2), inset 0 1px 0 white;
}

.hero-system-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.hero-system-card-head h2 {
    margin: 0;
    color: var(--home-ink) !important;
    font-size: 24px !important;
    font-weight: 580 !important;
    letter-spacing: -.04em !important;
    line-height: 1.15 !important;
}

.hero-system-card-head > span {
    padding-top: 5px;
    color: rgba(17,17,17,.38);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .13em;
    line-height: 1.45;
    text-align: right;
    text-transform: uppercase;
}

.hero-system-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-system-step {
    display: grid;
    min-height: 70px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 18px;
    align-items: center;
    grid-template-columns: 42px 1fr 18px;
    gap: 10px;
    color: rgba(17,17,17,.48);
    transition: color 260ms ease, background 260ms ease, border-color 260ms ease, transform 320ms cubic-bezier(.16,1,.3,1);
}

.hero-system-step:hover {
    border-color: rgba(17,17,17,.055);
    background: #f7f5f1;
    color: var(--home-ink);
    transform: translateX(4px);
}

.hero-system-step.is-active {
    border-color: rgba(254,205,26,.2);
    background: linear-gradient(105deg, #fff8a9, #fffbd6);
    color: var(--home-ink);
}

.hero-system-step-icon {
    display: grid;
    width: 39px;
    height: 39px;
    border-radius: 13px;
    background: rgba(17,17,17,.06);
    place-items: center;
    color: rgba(17,17,17,.62);
    font-size: 10px;
    font-weight: 760;
}

.hero-system-step:nth-child(2) .hero-system-step-icon { background: rgba(132,230,246,.32); }
.hero-system-step:nth-child(3) .hero-system-step-icon { background: rgba(247,164,158,.26); }

.hero-system-step > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.hero-system-step strong {
    font-size: 13px;
    font-weight: 670;
    letter-spacing: -.015em;
}

.hero-system-step small {
    overflow: hidden;
    color: rgba(17,17,17,.42);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-system-step > i {
    font-size: 14px;
    font-style: normal;
    opacity: .4;
}

.hero-system-link {
    display: inline-flex;
    margin-top: 18px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(17,17,17,.45);
    align-items: center;
    gap: 10px;
    color: var(--home-ink);
    font-size: 11px;
    font-weight: 630;
}

.hero-system-link span { transition: transform 240ms ease; }
.hero-system-link:hover span { transform: translateX(4px); }

.hero-metric-card {
    z-index: 4;
    right: 28px;
    bottom: 48px;
    width: min(50%, 330px);
    min-height: 285px;
    padding: 24px 24px 20px;
    border-radius: 28px;
    transform: rotate(3.2deg);
}

.hero-metric-card:hover {
    transform: rotate(1deg) translateY(-8px);
    box-shadow: 0 44px 88px rgba(45,37,25,.2), inset 0 1px 0 white;
}

.hero-metric-head,
.hero-metric-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-metric-head > span {
    color: rgba(17,17,17,.42);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
}

.hero-metric-head strong {
    display: flex;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(24,181,107,.09);
    align-items: center;
    gap: 7px;
    color: #099253;
    font-size: 9px;
    font-weight: 680;
}

.hero-metric-head strong i { width: 5px; height: 5px; box-shadow: none; }

.hero-metric-score {
    display: flex;
    margin-top: 19px;
    align-items: flex-end;
    gap: 9px;
}

.hero-metric-score strong {
    color: var(--home-ink);
    font-family: "Albert Sans", sans-serif;
    font-size: 43px;
    font-weight: 520;
    letter-spacing: -.065em;
    line-height: .9;
}

.hero-metric-score span {
    padding-bottom: 4px;
    color: rgba(17,17,17,.45);
    font-size: 11px;
}

.hero-metric-chart {
    display: flex;
    height: 92px;
    margin: 20px 0 12px;
    align-items: flex-end;
    gap: 8px;
}

.hero-metric-chart > span {
    position: relative;
    width: 100%;
    height: var(--bar);
    border-radius: 8px 8px 5px 5px;
    background: rgba(17,17,17,.1);
    transition: height 480ms cubic-bezier(.16,1,.3,1), transform 260ms ease;
}

.hero-metric-chart > span:nth-child(2),
.hero-metric-chart > span:nth-child(5) { background: var(--home-gold); }
.hero-metric-chart > span:nth-child(4),
.hero-metric-chart > span:nth-child(6) { background: var(--home-blue); }
.hero-metric-chart > span:hover { transform: translateY(-4px); }

.hero-metric-chart i {
    position: absolute;
    right: 0;
    bottom: -17px;
    left: 0;
    color: rgba(17,17,17,.32);
    font-size: 8px;
    font-style: normal;
    text-align: center;
}

.hero-metric-foot {
    margin-top: 22px;
    color: rgba(17,17,17,.35);
    font-size: 8px;
    font-weight: 620;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero-system-note {
    position: absolute;
    z-index: 1;
    right: 28px;
    bottom: 18px;
    left: 34px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: rgba(17,17,17,.34);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hero-system-note span:not(:last-child)::after {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-left: 18px;
    border-radius: 50%;
    background: rgba(17,17,17,.25);
    vertical-align: middle;
    content: "";
}

/* Reviews: no marquee, no stretched rows, no duplicate loop cards */
#testimonials {
    padding-top: 118px !important;
    padding-bottom: 118px !important;
}

#testimonials::after { display: none !important; }

#testimonials .testimonial-heading {
    margin-bottom: 42px !important;
}

#testimonials .testimonial-heading h2 {
    color: #fff !important;
    font-size: clamp(46px, 4.2vw, 64px) !important;
}

#testimonials .testimonial-heading-aside p {
    color: rgba(255,255,255,.58) !important;
}

#testimonials .testimonial-review-grid {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

#testimonials .testimonial-review-grid > div {
    position: relative;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 34px 36px !important;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 28px !important;
    background: rgba(250,250,248,.97) !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.16) !important;
    gap: 22px !important;
    transform: none !important;
    transition: transform 380ms cubic-bezier(.16,1,.3,1), box-shadow 380ms ease !important;
}

#testimonials .testimonial-review-grid > div:nth-child(n+5) {
    display: none !important;
}

#testimonials .testimonial-review-grid > div::before {
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--home-gold);
    content: "";
}

#testimonials .testimonial-review-grid > div:nth-child(2)::before { background: var(--home-coral); }
#testimonials .testimonial-review-grid > div:nth-child(3)::before { background: var(--home-blue); }
#testimonials .testimonial-review-grid > div:nth-child(4)::before { background: linear-gradient(90deg, var(--home-gold), var(--home-blue)); }

#testimonials .testimonial-review-grid > div:hover {
    z-index: 3;
    box-shadow: 0 30px 70px rgba(0,0,0,.22) !important;
    transform: translateY(-6px) !important;
}

#testimonials .testimonial-review-grid svg {
    width: 34px;
    height: 34px;
    color: rgba(17,17,17,.09) !important;
}

#testimonials .testimonial-review-grid p,
#testimonials .testimonial-review-grid > div > div:not(:last-child) {
    margin: 0;
    color: var(--home-ink) !important;
    font-family: "Albert Sans", sans-serif;
    font-size: 18px !important;
    font-weight: 510 !important;
    line-height: 1.55 !important;
}

#testimonials .testimonial-review-grid > div > div:last-child {
    padding-top: 7px;
    border-top: 1px solid rgba(17,17,17,.08);
}

#testimonials .testimonial-review-grid > div > div:last-child span:first-child {
    font-size: 14px !important;
}

#testimonials .testimonial-review-grid > div > div:last-child span:last-child {
    margin-top: 3px;
    color: rgba(17,17,17,.42) !important;
    font-size: 12px !important;
}

/* Closing CTA */
#contact {
    padding-top: 84px !important;
    padding-bottom: 24px !important;
}

#contact > .px-5 {
    max-width: 1600px !important;
    margin: 0 auto;
    padding-inline: 48px !important;
}

#contact > .px-5 > div {
    padding: 88px clamp(32px, 5vw, 78px) !important;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 46px !important;
    background:
        radial-gradient(circle at 7% 12%, rgba(254,205,26,.17), transparent 27%),
        radial-gradient(circle at 92% 88%, rgba(132,230,246,.13), transparent 30%),
        #141617 !important;
    box-shadow: 0 38px 90px rgba(35,30,21,.18);
}

#contact > .px-5 > div > div:first-child {
    opacity: .17 !important;
    mix-blend-mode: luminosity;
}

#contact > .px-5 > div > div:nth-child(2) {
    background: linear-gradient(110deg, rgba(10,11,12,.8), rgba(10,11,12,.38)) !important;
}

#contact > .px-5 > div > .relative.z-10 {
    max-width: 1404px !important;
    padding: 0 !important;
}

#contact > .px-5 > div > .relative.z-10 > .flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .78fr);
    gap: clamp(60px, 8vw, 128px) !important;
    align-items: center;
}

#contact .contact-mode-heading {
    max-width: 690px;
    margin-bottom: 20px !important;
    font-size: clamp(46px, 4.8vw, 68px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
}

#contact .contact-mode-heading + p + div {
    display: inline-flex;
    margin-bottom: 23px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.065);
    color: white;
    font-size: 11px;
    letter-spacing: .04em;
}

#contact [data-editable="cta-section-desc"] {
    max-width: 620px !important;
    color: rgba(255,255,255,.61) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

#contact .flex.flex-col.gap-6.mt-4 {
    display: grid !important;
    max-width: 650px;
    margin-top: 6px !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px !important;
}

#contact .flex.flex-col.gap-6.mt-4 > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 17px;
    background: rgba(255,255,255,.055);
    transition: background 240ms ease, border-color 240ms ease, transform 280ms cubic-bezier(.16,1,.3,1);
}

#contact .flex.flex-col.gap-6.mt-4 > div:hover {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.09);
    transform: translateY(-3px);
}

#contact .lg\:w-\[480px\] {
    width: 100% !important;
}

#contact .lg\:w-\[480px\] > div {
    padding: 30px !important;
    border: 1px solid rgba(17,17,17,.07) !important;
    border-radius: 28px !important;
    background: rgba(250,249,246,.97) !important;
    box-shadow: 0 30px 70px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

#contact form label {
    color: rgba(17,17,17,.44) !important;
    font-weight: 720 !important;
}

#contact form input,
#contact form textarea {
    border: 1px solid rgba(17,17,17,.09) !important;
    background: #fff !important;
    color: var(--home-ink) !important;
    box-shadow: inset 0 1px 0 rgba(17,17,17,.015);
}

#contact form input::placeholder,
#contact form textarea::placeholder {
    color: rgba(17,17,17,.28) !important;
}

#contact form input:focus,
#contact form textarea:focus {
    border-color: rgba(17,17,17,.28) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(132,230,246,.17);
}

/* Footer */
footer[data-kite-global="site-footer"] {
    padding-top: 94px !important;
    padding-bottom: 38px !important;
    border-top: 0 !important;
    background:
        linear-gradient(rgba(17,17,17,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,17,.028) 1px, transparent 1px),
        #efede7 !important;
    background-size: 52px 52px;
}

footer[data-kite-global="site-footer"] > div {
    max-width: 1500px !important;
    padding-inline: 48px !important;
}

footer[data-kite-global="site-footer"] > div > .grid {
    padding: 48px !important;
    border: 1px solid rgba(17,17,17,.075) !important;
    border-radius: 34px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 24px 64px rgba(42,35,23,.07), inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

footer[data-kite-global="site-footer"] .lg\:col-span-4 {
    padding-right: 36px;
}

footer[data-kite-global="site-footer"] .lg\:col-span-4 > p {
    color: rgba(17,17,17,.56) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

footer[data-kite-global="site-footer"] .lg\:col-span-4 > .flex {
    display: flex;
    margin-top: 8px;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
}

footer[data-kite-global="site-footer"] .lg\:col-span-4 > .flex > div {
    padding: 9px 11px;
    border: 1px solid rgba(17,17,17,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.58);
}

footer[data-kite-global="site-footer"] .footer-heading {
    position: relative;
    margin-bottom: 9px;
    padding-bottom: 12px;
    color: var(--home-ink) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

footer[data-kite-global="site-footer"] .footer-heading::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--home-gold);
    content: "";
}

footer[data-kite-global="site-footer"] li a {
    position: relative;
    color: rgba(17,17,17,.58) !important;
    font-size: 13px !important;
    transition: color 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1) !important;
}

footer[data-kite-global="site-footer"] li a:hover {
    color: var(--home-ink) !important;
    transform: translateX(4px) !important;
}

footer[data-kite-global="site-footer"] > div > .pt-8 {
    max-width: calc(100% - 24px);
    margin: 0 auto;
    padding-top: 25px !important;
}

@media (max-width: 1180px) {
    #about .section-container {
        grid-template-columns: minmax(420px, .9fr) minmax(510px, 1.1fr) !important;
        gap: 42px !important;
    }

    .hero-system-card { left: 24px; }
    .hero-metric-card { right: 20px; }

    #contact > .px-5 > div > .relative.z-10 > .flex {
        gap: 52px !important;
    }
}

@media (max-width: 1023px) {
    #about {
        min-height: 0 !important;
    }

    #about .section-container {
        grid-template-columns: 1fr !important;
    }

    .hero-system-showcase {
        min-height: 600px;
    }

    #contact > .px-5 > div > .relative.z-10 > .flex {
        grid-template-columns: 1fr;
    }

    #contact .lg\:w-\[480px\] {
        max-width: 680px;
    }

    footer[data-kite-global="site-footer"] .lg\:col-span-4 {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    header[data-kite-global="site-header"] {
        top: 10px !important;
        padding-inline: 12px !important;
    }

    header[data-kite-global="site-header"] nav {
        height: 58px !important;
        padding: 0 8px 0 14px !important;
    }

    header[data-kite-global="site-header"] nav > a:first-child { min-width: 0; }
    header[data-kite-global="site-header"] nav > a:first-child img { height: 26px !important; }

    #about {
        padding-top: 108px !important;
        padding-bottom: 56px !important;
    }

    #about .section-container {
        padding-inline: 18px !important;
        gap: 45px !important;
    }

    #about .hero-title {
        font-size: clamp(43px, 12vw, 56px) !important;
        line-height: 1 !important;
    }

    .hero-system-showcase {
        min-height: 510px;
        border-radius: 29px;
    }

    .hero-system-status {
        top: 15px;
        right: 15px;
        font-size: 8px;
    }

    .hero-system-card {
        top: 44px;
        left: 15px;
        width: calc(100% - 62px);
        min-height: 354px;
        padding: 22px 18px 18px;
        border-radius: 23px;
    }

    .hero-system-card-head { margin-bottom: 14px; }
    .hero-system-card-head h2 { font-size: 20px !important; }
    .hero-system-step { min-height: 58px; padding: 7px 9px; grid-template-columns: 35px 1fr 15px; gap: 7px; }
    .hero-system-step-icon { width: 33px; height: 33px; border-radius: 11px; font-size: 8px; }
    .hero-system-step strong { font-size: 11px; }
    .hero-system-step small { font-size: 8px; }
    .hero-system-link { margin-top: 12px; }

    .hero-metric-card {
        right: 14px;
        bottom: 28px;
        width: 57%;
        min-height: 202px;
        padding: 17px;
        border-radius: 21px;
    }

    .hero-metric-head > span { font-size: 7px; }
    .hero-metric-head strong { padding: 5px 6px; font-size: 7px; }
    .hero-metric-score { margin-top: 13px; }
    .hero-metric-score strong { font-size: 31px; }
    .hero-metric-chart { height: 53px; margin: 12px 0 8px; gap: 5px; }
    .hero-metric-foot { margin-top: 18px; font-size: 6px; }
    .hero-system-note { display: none; }

    #testimonials {
        padding-top: 82px !important;
        padding-bottom: 82px !important;
    }

    #testimonials::before {
        inset: 7px;
        border-radius: 34px;
    }

    #testimonials .testimonial-heading {
        display: flex !important;
        margin-bottom: 30px !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    #testimonials .testimonial-heading h2 { font-size: 39px !important; }
    #testimonials .testimonial-heading-aside p { font-size: 14px !important; }

    #testimonials .testimonial-review-grid {
        display: flex;
        padding: 0 18px 12px;
        overflow-x: auto;
        scroll-padding-left: 18px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    #testimonials .testimonial-review-grid::-webkit-scrollbar { display: none; }

    #testimonials .testimonial-review-grid > div {
        width: min(84vw, 340px) !important;
        padding: 27px !important;
        flex: 0 0 min(84vw, 340px);
        scroll-snap-align: start;
    }

    #testimonials .testimonial-review-grid p,
    #testimonials .testimonial-review-grid > div > div:not(:last-child) {
        font-size: 16px !important;
    }

    #contact {
        padding-top: 55px !important;
        padding-bottom: 14px !important;
    }

    #contact > .px-5 { padding-inline: 12px !important; }

    #contact > .px-5 > div {
        padding: 50px 20px 20px !important;
        border-radius: 31px !important;
    }

    #contact .contact-mode-heading { font-size: 43px !important; }
    #contact [data-editable="cta-section-desc"] { font-size: 14px !important; }

    #contact .flex.flex-col.gap-6.mt-4 {
        grid-template-columns: 1fr;
    }

    #contact .lg\:w-\[480px\] > div {
        padding: 22px !important;
        border-radius: 23px !important;
    }

    footer[data-kite-global="site-footer"] {
        padding-top: 52px !important;
        padding-bottom: 28px !important;
    }

    footer[data-kite-global="site-footer"] > div { padding-inline: 12px !important; }

    footer[data-kite-global="site-footer"] > div > .grid {
        padding: 30px 24px !important;
        border-radius: 26px;
        gap: 36px !important;
    }

    footer[data-kite-global="site-footer"] .lg\:col-span-4 > .flex {
        flex-direction: column !important;
        align-items: flex-start;
    }

    footer[data-kite-global="site-footer"] > div > .pt-8 {
        align-items: flex-start !important;
        padding-inline: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header[data-kite-global="site-header"],
    .hero-system-card,
    .hero-metric-card,
    .hero-system-step,
    .hero-metric-chart > span,
    #testimonials .testimonial-review-grid > div {
        transition: none !important;
    }
}

/* ========================================================================== */
/* Work, testimonials, and FAQ                                                */
/* ========================================================================== */

/* Work */
#work {
    padding-top: 128px !important;
    padding-bottom: 128px !important;
}

#work .work-header {
    display: grid !important;
    grid-template-columns: minmax(440px, 0.9fr) minmax(520px, 1.1fr);
    gap: 16px 84px !important;
    margin-bottom: 58px !important;
    align-items: end;
    text-align: left !important;
}

#work .work-header h2 {
    grid-row: 1 / span 2;
    max-width: 650px;
    margin: 0;
    font-size: clamp(46px, 4.2vw, 64px) !important;
    font-weight: 430 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.02 !important;
}

#work .work-header .premium-subtitle,
#work .work-header > p:last-child {
    max-width: 650px;
    margin: 0 !important;
}

#work .work-header .premium-subtitle {
    font-size: 20px !important;
}

#work .work-header > p:last-child {
    font-size: 16px !important;
    line-height: 1.62 !important;
}

#work .work-projects {
    gap: 22px !important;
}

#work .work-project-card {
    position: relative;
    gap: clamp(36px, 5vw, 72px) !important;
    padding: clamp(22px, 2.5vw, 34px) !important;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.075) !important;
    border-radius: 40px !important;
    background: rgba(255, 255, 255, 0.53) !important;
    box-shadow: 0 18px 52px rgba(47, 40, 24, 0.065);
    transform: translateY(0);
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 480ms ease, border-color 320ms ease, background 320ms ease;
}

#work .work-project-card::before {
    position: absolute;
    z-index: 5;
    top: 23px;
    right: 25px;
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid rgba(17, 17, 17, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: rgba(17, 17, 17, 0.42);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.1em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#work .work-project-card:nth-child(1)::before { content: "PROJECT 01"; }
#work .work-project-card:nth-child(2)::before { content: "PROJECT 02"; }

#work .work-project-card::after {
    position: absolute;
    z-index: 4;
    right: 34px;
    bottom: 0;
    left: 34px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--home-gold);
    content: "";
    opacity: 0;
    transform: scaleX(0.25);
    transform-origin: left;
    transition: opacity 320ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}

#work .work-project-card:nth-child(2)::after {
    background: var(--home-blue);
}

#work .work-project-card:hover {
    border-color: rgba(17, 17, 17, 0.13) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow: 0 34px 82px rgba(47, 40, 24, 0.12);
    transform: translateY(-6px);
}

#work .work-project-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

#work .work-browser {
    border-color: rgba(17, 17, 17, 0.08) !important;
    border-radius: 27px !important;
    box-shadow: 0 24px 58px rgba(47, 40, 24, 0.11) !important;
    transform: none !important;
    transition: transform 600ms cubic-bezier(.16, 1, .3, 1), box-shadow 500ms ease !important;
}

#work .work-project-card:hover .work-browser {
    box-shadow: 0 34px 72px rgba(47, 40, 24, 0.16) !important;
    transform: translateY(-5px) !important;
}

#work .work-browser > div:first-child {
    min-height: 48px;
    padding: 10px 16px !important;
}

#work .work-browser > div:last-child img {
    object-fit: cover !important;
    object-position: top center;
}

#work .work-project-copy {
    padding: 30px 20px;
}

#work .work-project-copy h3 {
    max-width: 500px;
    font-size: clamp(36px, 3.3vw, 48px) !important;
    font-weight: 480 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.04 !important;
}

#work .work-project-copy > div:nth-of-type(2) {
    max-width: 520px;
    line-height: 1.64 !important;
}

#work .work-project-copy .btn-premium-base {
    margin-top: 10px !important;
}

/* Testimonials */
#testimonials {
    position: relative;
    padding-top: 126px !important;
    padding-bottom: 132px !important;
    isolation: isolate;
}

#testimonials::before {
    position: absolute;
    z-index: -2;
    inset: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50px;
    background:
        radial-gradient(circle at 8% 8%, rgba(254, 205, 26, 0.15), transparent 28%),
        radial-gradient(circle at 95% 88%, rgba(132, 230, 246, 0.12), transparent 31%),
        #17191a;
    box-shadow: 0 34px 90px rgba(31, 28, 21, 0.15);
    content: "";
}

#testimonials::after {
    position: absolute;
    z-index: 4;
    inset: 0;
    background: linear-gradient(90deg, #17191a 0, transparent 7%, transparent 93%, #17191a 100%);
    content: "";
    opacity: 0.78;
    pointer-events: none;
}

#testimonials .testimonial-heading {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.65fr);
    gap: 18px 80px;
    margin-bottom: 58px;
    align-items: end;
}

#testimonials .testimonial-heading .section-kicker {
    position: static;
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.5);
    transform: none;
}

#testimonials .testimonial-heading h2 {
    max-width: 720px;
    color: white;
    font-size: clamp(46px, 4.2vw, 64px);
}

#testimonials .testimonial-heading-aside {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
}

#testimonials .testimonial-heading-aside p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, 0.54);
    font-size: 16px;
    line-height: 1.6;
}

.testimonial-motion-toggle {
    display: inline-flex;
    min-height: 40px;
    padding: 9px 10px 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    align-items: center;
    gap: 11px;
    font-family: "Geist", sans-serif;
    font-size: 11px;
    font-weight: 620;
    cursor: pointer;
    transition: color 260ms ease, background 260ms ease, border-color 260ms ease;
}

.testimonial-motion-toggle:hover,
.testimonial-motion-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.testimonial-motion-toggle:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.72);
    outline-offset: 3px;
}

.testimonial-motion-toggle i {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--home-gold);
}

.testimonial-motion-toggle i::before,
.testimonial-motion-toggle i::after {
    position: absolute;
    top: 7px;
    width: 2px;
    height: 10px;
    border-radius: 999px;
    background: var(--home-ink);
    content: "";
}

.testimonial-motion-toggle i::before { left: 9px; }
.testimonial-motion-toggle i::after { right: 9px; }

#testimonials.testimonials-paused .testimonial-motion-toggle i::before {
    top: 7px;
    left: 9px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--home-ink);
    border-radius: 0;
    background: transparent;
}

#testimonials.testimonials-paused .testimonial-motion-toggle i::after {
    display: none;
}

#testimonials .animate-marquee {
    position: relative;
    z-index: 2;
    gap: 18px !important;
    padding-left: max(48px, calc((100vw - 1500px) / 2 + 48px)) !important;
    transform: none !important;
}

#testimonials .animate-marquee:hover,
#testimonials.testimonials-paused .animate-marquee {
    animation-play-state: paused !important;
}

#testimonials .animate-marquee > div {
    position: relative;
    width: 400px !important;
    min-height: 390px;
    margin-top: 0 !important;
    padding: 35px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 29px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.19) !important;
    gap: 25px !important;
    transform: translateY(0);
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms ease !important;
}

#testimonials .animate-marquee > div::before {
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--home-gold);
    content: "";
}

#testimonials .animate-marquee > div:nth-child(3n + 2)::before { background: var(--home-coral); }
#testimonials .animate-marquee > div:nth-child(3n + 3)::before { background: var(--home-blue); }

#testimonials .animate-marquee > div:hover {
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.27) !important;
    transform: translateY(-7px);
}

#testimonials .animate-marquee > div > svg {
    width: 38px;
    height: 38px;
    color: rgba(17, 17, 17, 0.08) !important;
}

#testimonials .animate-marquee > div > p,
#testimonials .animate-marquee > div > div:not(.font-geist) {
    font-size: 18px !important;
    font-weight: 470 !important;
    line-height: 1.55 !important;
}

/* FAQ */
#faq {
    padding-top: 126px !important;
    padding-bottom: 126px !important;
    border-top: 0;
}

#faq .faq-layout {
    grid-template-columns: minmax(340px, 0.78fr) minmax(600px, 1.22fr) !important;
    gap: clamp(42px, 6vw, 88px) !important;
    align-items: start;
}

#faq .faq-sidebar,
#faq .faq-list {
    grid-column: auto !important;
}

#faq .faq-sidebar {
    top: 112px !important;
    padding: 38px;
    border: 1px solid rgba(17, 17, 17, 0.075);
    border-radius: 34px;
    background:
        radial-gradient(circle at 100% 0, rgba(254, 205, 26, 0.23), transparent 37%),
        rgba(255, 255, 255, 0.6);
    box-shadow: 0 18px 54px rgba(47, 40, 24, 0.07);
    text-align: left !important;
}

#faq .faq-sidebar h2 {
    margin: 0;
    font-family: "Albert Sans", sans-serif;
    font-size: clamp(42px, 4vw, 58px) !important;
    font-weight: 440 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.02 !important;
}

#faq .faq-sidebar p {
    font-size: 16px !important;
    line-height: 1.62 !important;
}

#faq .faq-sidebar > div > div,
#faq .faq-sidebar > div > p:last-child {
    display: none;
}

#faq .faq-sidebar .btn-premium-base {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#faq .faq-list {
    gap: 8px !important;
    padding: 10px !important;
    border: 1px solid rgba(17, 17, 17, 0.075);
    border-radius: 32px !important;
    background: rgba(235, 231, 223, 0.88) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 20px 58px rgba(47, 40, 24, 0.07);
}

#faq .faq-item {
    position: relative;
    padding: 28px 30px !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: none;
    transition: background 320ms ease, border-color 320ms ease, box-shadow 380ms ease, transform 380ms cubic-bezier(.16, 1, .3, 1) !important;
}

#faq .faq-item::before {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--home-gold);
    content: "";
    opacity: 0;
    transform: scaleY(0.25);
    transition: opacity 300ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

#faq .faq-item:hover {
    border-color: rgba(17, 17, 17, 0.07) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    transform: translateY(-2px);
}

#faq .faq-item.is-open {
    border-color: rgba(17, 17, 17, 0.1) !important;
    background: white !important;
    box-shadow: 0 18px 42px rgba(47, 40, 24, 0.09);
}

#faq .faq-item.is-open::before {
    opacity: 1;
    transform: scaleY(1);
}

#faq .faq-trigger {
    gap: 24px;
    outline: none;
}

#faq .faq-trigger:focus-visible {
    border-radius: 12px;
    outline: 3px solid rgba(132, 230, 246, 0.72);
    outline-offset: 5px;
}

#faq .faq-trigger h6 {
    font-family: "Albert Sans", sans-serif;
    font-size: 21px !important;
    font-weight: 520 !important;
    letter-spacing: -0.03em !important;
}

#faq .faq-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto;
    background: rgba(17, 17, 17, 0.055) !important;
    box-shadow: none !important;
    transition: color 300ms ease, background 300ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1) !important;
}

#faq .faq-item.is-open .faq-icon {
    background: var(--home-ink) !important;
    color: white;
    transform: rotate(180deg);
}

#faq .faq-item.is-open .faq-icon svg {
    color: white !important;
}

#faq .faq-grid p,
#faq .faq-grid .overflow-hidden > div {
    max-width: 720px;
    padding-top: 18px !important;
    color: rgba(17, 17, 17, 0.58) !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
}

#faq .faq-grid {
    grid-template-rows: 0fr !important;
}

#faq .faq-item.is-open .faq-grid {
    grid-template-rows: 1fr !important;
}

@media (max-width: 1100px) {
    #work .work-header,
    #testimonials .testimonial-heading,
    #faq .faq-layout {
        grid-template-columns: 1fr !important;
    }

    #work .work-header h2 {
        grid-row: auto;
    }

    #testimonials .testimonial-heading .section-kicker {
        grid-column: 1;
    }

    #testimonials .testimonial-heading-aside {
        max-width: 680px;
    }

    #faq .faq-sidebar {
        position: static !important;
    }
}

@media (max-width: 767px) {
    #work,
    #testimonials,
    #faq {
        padding-top: 80px !important;
        padding-bottom: 82px !important;
    }

    #work .work-header {
        gap: 17px !important;
        margin-bottom: 36px !important;
    }

    #work .work-header h2 {
        font-size: 40px !important;
    }

    #work .work-header .premium-subtitle {
        font-size: 18px !important;
    }

    #work .work-projects {
        gap: 13px !important;
    }

    #work .work-project-card {
        gap: 14px !important;
        padding: 8px 8px 20px !important;
        border-radius: 29px !important;
    }

    #work .work-project-card::before {
        top: 18px;
        right: 18px;
        font-size: 7px;
    }

    #work .work-browser {
        border-radius: 22px !important;
    }

    #work .work-browser > div:first-child > div:nth-child(2) {
        width: 170px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        font-size: 8px !important;
    }

    #work .work-project-copy {
        padding: 19px 16px 8px;
    }

    #work .work-project-copy h3 {
        font-size: 34px !important;
    }

    #testimonials::before {
        inset: 7px;
        border-radius: 34px;
    }

    #testimonials::after {
        background: linear-gradient(90deg, #17191a 0, transparent 3%, transparent 97%, #17191a 100%);
    }

    #testimonials .testimonial-heading {
        gap: 17px;
        margin-bottom: 38px;
    }

    #testimonials .testimonial-heading h2 {
        font-size: 40px;
    }

    #testimonials .animate-marquee {
        gap: 12px !important;
        padding-left: 18px !important;
    }

    #testimonials .animate-marquee > div {
        width: 310px !important;
        min-height: 365px;
        padding: 27px !important;
    }

    #testimonials .animate-marquee > div > p,
    #testimonials .animate-marquee > div > div:not(.font-geist) {
        font-size: 16px !important;
    }

    #faq .faq-layout {
        gap: 16px !important;
    }

    #faq .faq-sidebar {
        gap: 24px !important;
        padding: 27px;
        border-radius: 28px;
    }

    #faq .faq-sidebar h2 {
        font-size: 40px !important;
    }

    #faq .faq-list {
        padding: 7px !important;
        border-radius: 27px !important;
    }

    #faq .faq-item {
        padding: 23px 20px !important;
        border-radius: 21px !important;
    }

    #faq .faq-trigger h6 {
        font-size: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #work .work-project-card,
    #work .work-browser,
    #testimonials .animate-marquee > div,
    #faq .faq-item,
    #faq .faq-item::before,
    #faq .faq-icon {
        transition: none !important;
    }
}

/* ========================================================================== */
/* Capabilities and unified pricing experience                               */
/* ========================================================================== */

/* Capabilities */
#features {
    padding-top: 126px !important;
    padding-bottom: 126px !important;
}

#features .capabilities-header {
    display: grid !important;
    grid-template-columns: minmax(440px, 0.9fr) minmax(520px, 1.1fr);
    gap: 18px 84px !important;
    margin-bottom: 54px !important;
    align-items: end;
    text-align: left !important;
}

#features .capabilities-header [data-editable="features-title"] {
    grid-row: 1 / span 2;
    max-width: 680px;
    margin: 0;
    font-size: clamp(44px, 4.15vw, 62px) !important;
    font-weight: 430 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.02 !important;
}

#features .capabilities-header [data-editable="features-desc"] {
    max-width: 650px !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
}

#features .capabilities-header > div {
    align-self: start;
    justify-self: start;
    padding: 8px 13px !important;
    border: 1px solid rgba(17, 17, 17, 0.075) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66) !important;
    font-size: 12px !important;
}

#features .capabilities-header > p:last-child {
    display: none;
}

#features .features-nav-container {
    width: 100%;
    max-width: none !important;
    padding: 8px !important;
    border: 1px solid rgba(17, 17, 17, 0.09) !important;
    border-radius: 25px !important;
    background: rgba(235, 231, 223, 0.88) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.76), 0 14px 36px rgba(47, 40, 24, 0.065) !important;
}

#features .feature-tab-btn {
    position: relative;
    min-width: 0;
    min-height: 64px;
    height: auto !important;
    padding: 11px 13px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background: transparent;
    color: rgba(17, 17, 17, 0.5);
    font-family: "Geist", sans-serif;
    font-size: 12px !important;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
    cursor: pointer;
    transition: color 260ms ease, background 320ms ease, box-shadow 360ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1) !important;
}

#features .feature-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.52);
    color: var(--home-ink);
    transform: translateY(-2px);
}

#features .feature-tab-btn.active {
    border-color: rgba(17, 17, 17, 0.76) !important;
    background: var(--home-ink) !important;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.18) !important;
    color: white !important;
    transform: translateY(-1px);
}

#features .feature-tab-btn .tab-icon {
    flex: 0 0 auto;
    opacity: 0.46;
    transition: color 260ms ease, opacity 260ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}

#features .feature-tab-btn.active .tab-icon {
    color: var(--home-gold);
    opacity: 1;
    transform: scale(1.08);
}

#features .feature-tab-btn:focus-visible,
#features .feature-accordion-header:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.76);
    outline-offset: 3px;
}

#features .feature-tabs-wrapper {
    width: 100%;
    max-width: none !important;
    min-height: 550px;
    margin-top: 14px !important;
}

#features .feature-content-block {
    min-height: 550px;
    padding: 11px !important;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.075) !important;
    border-radius: 36px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 28px 76px rgba(47, 40, 24, 0.085) !important;
}

#features .feature-content-block::before {
    position: absolute;
    z-index: 20;
    top: 28px;
    right: 30px;
    color: rgba(17, 17, 17, 0.25);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.12em;
}

#features [data-feature-content="0"]::before { content: "01 / 06"; }
#features [data-feature-content="1"]::before { content: "02 / 06"; }
#features [data-feature-content="2"]::before { content: "03 / 06"; }
#features [data-feature-content="3"]::before { content: "04 / 06"; }
#features [data-feature-content="4"]::before { content: "05 / 06"; }
#features [data-feature-content="5"]::before { content: "06 / 06"; }

#features .feature-content-block > .grid {
    gap: 0 !important;
}

#features .tab-visual-container {
    min-height: 525px;
    border-radius: 27px !important;
    background: #ece9e2;
}

#features .tab-visual-bg {
    border-radius: 27px !important;
    opacity: 0.42;
    transform: scale(1.04);
}

#features .feature-content-block.active .tab-visual-bg {
    transform: scale(1);
}

#features .tab-visual-mockup {
    width: 82%;
    border-radius: 22px !important;
    box-shadow: 0 28px 64px rgba(31, 28, 21, 0.18);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1), box-shadow 500ms ease !important;
}

#features .tab-visual-container:hover .tab-visual-mockup {
    box-shadow: 0 36px 78px rgba(31, 28, 21, 0.24);
    transform: translateY(-5px) scale(1.018);
}

#features .feature-content-block > .grid > div:last-child {
    padding: 58px clamp(38px, 5vw, 76px) !important;
    justify-content: center;
}

#features .feature-content-block h3 {
    max-width: 560px;
    font-size: clamp(34px, 3.2vw, 47px) !important;
    font-weight: 470 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.05 !important;
}

#features .feature-content-block .premium-subtitle {
    max-width: 600px;
    font-size: 19px !important;
    line-height: 1.42 !important;
}

#features .feature-content-block a {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.25);
    font-weight: 620 !important;
}

/* Pricing family tabs */
.pricing-family-accordion {
    display: none;
}

@media (min-width: 768px) {
    .pricing-family:not(.is-active) {
        display: none !important;
    }

    .pricing-family.is-active {
        display: block;
        animation: pricingFamilyIn 520ms cubic-bezier(.16, 1, .3, 1) both;
    }
}

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

.pricing-hub-zone {
    padding-top: 118px;
    padding-bottom: 104px;
}

.pricing-hub-intro {
    padding-bottom: 8px !important;
}

.pricing-family-nav {
    top: 92px;
    gap: 7px;
    margin-top: 54px;
    padding: 8px;
    border-radius: 25px;
}

.pricing-family-nav button {
    position: relative;
    display: flex;
    min-height: 60px;
    padding: 13px 18px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: rgba(17, 17, 17, 0.58);
    align-items: center;
    gap: 11px;
    font-family: "Geist", sans-serif;
    font-size: 14px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: color 260ms ease, background 320ms ease, border-color 320ms ease, box-shadow 360ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1);
}

.pricing-family-nav button::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--home-gold);
    content: "";
    opacity: 0;
    transform: scaleX(0.25);
    transition: opacity 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.pricing-family-nav button:nth-child(2)::after { background: var(--home-coral); }
.pricing-family-nav button:nth-child(3)::after { background: var(--home-blue); }

.pricing-family-nav button:hover:not(.active) {
    border-color: rgba(17, 17, 17, 0.07);
    background: rgba(255, 255, 255, 0.58);
    color: var(--home-ink);
    transform: translateY(-2px);
}

.pricing-family-nav button.active {
    border-color: rgba(17, 17, 17, 0.76);
    background: var(--home-ink);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.17);
    color: white;
    transform: translateY(-1px);
}

.pricing-family-nav button.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.pricing-family-nav button span {
    color: rgba(17, 17, 17, 0.32);
    font-size: 10px;
    letter-spacing: 0.08em;
    transition: color 260ms ease;
}

.pricing-family-nav button.active span {
    color: rgba(255, 255, 255, 0.5);
}

.pricing-family-nav button:focus-visible,
.pricing-family-accordion:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.78);
    outline-offset: 3px;
}

.pricing-family.is-active {
    scroll-margin-top: 178px !important;
}

#pricing.is-active,
#growth-addons.is-active,
#hosting-plans.is-active {
    margin-top: 22px !important;
}

#pricing.is-active {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
}

#pricing .website-pricing-layout {
    display: grid !important;
    grid-template-columns: minmax(380px, 0.74fr) minmax(610px, 1.26fr);
    gap: clamp(48px, 5vw, 76px) !important;
    align-items: start;
}

#pricing .website-pricing-selector,
#pricing .website-pricing-detail {
    width: 100% !important;
}

#pricing .website-pricing-selector {
    max-width: 465px;
}

#pricing .website-pricing-detail {
    max-width: none;
}

#pricing .website-pricing-detail-stage {
    min-height: 560px;
}

#pricing .website-pricing-detail .plan-card-premium {
    width: 100%;
    padding: clamp(32px, 3.3vw, 44px) !important;
}

#pricing .website-pricing-detail [data-price-content] ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px !important;
    align-items: start;
}

#pricing .website-pricing-detail [data-price-content] li {
    min-width: 0;
    margin: 0 !important;
}

#pricing .website-pricing-detail [data-price-content] li span {
    line-height: 1.45;
}

#pricing .website-pricing-detail [data-price-content] .items-baseline > span:first-child {
    font-size: clamp(44px, 4.6vw, 60px) !important;
}

#pricing .website-pricing-detail [data-price-content] .items-baseline > span:last-child {
    max-width: 410px;
}

#growth-addons.is-active,
#hosting-plans.is-active {
    padding-top: 66px !important;
    padding-bottom: 70px !important;
}

#growth-addons > .section-container > .grid > div,
#hosting-plans > div > .grid > div {
    transition: transform 440ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms ease, border-color 320ms ease, background 320ms ease !important;
}

#growth-addons > .section-container > .grid > div::before,
#hosting-plans > div > .grid > div::before {
    transition: opacity 300ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1100px) {
    #features .capabilities-header {
        grid-template-columns: 1fr;
        gap: 20px !important;
    }

    #features .capabilities-header [data-editable="features-title"] {
        grid-row: auto;
        max-width: 760px;
    }

    #features .capabilities-header [data-editable="features-desc"] {
        max-width: 760px !important;
    }

    #features .features-nav-container {
        overflow-x: auto;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }

    #features .feature-tab-btn {
        flex: 0 0 210px !important;
    }
}

@media (max-width: 1279px) {
    #pricing .website-pricing-layout {
        grid-template-columns: 1fr;
    }

    #pricing .website-pricing-selector {
        max-width: none;
    }
}

@media (max-width: 767px) {
    #features {
        padding-top: 80px !important;
        padding-bottom: 82px !important;
    }

    #features .capabilities-header {
        gap: 17px !important;
        margin-bottom: 34px !important;
        text-align: left !important;
    }

    #features .capabilities-header [data-editable="features-title"] {
        font-size: 40px !important;
    }

    #features .capabilities-header [data-editable="features-desc"] {
        font-size: 15px !important;
        line-height: 1.58 !important;
    }

    #features .capabilities-header > div {
        align-self: start;
        text-align: left !important;
    }

    #features .section-container > .flex.justify-center {
        display: none !important;
    }

    #features .feature-tabs-wrapper {
        min-height: 0;
        margin-top: 0 !important;
    }

    #features .feature-accordion-header {
        display: flex !important;
        min-height: 70px;
        margin: 0 0 8px;
        padding: 14px 15px;
        border: 1px solid rgba(17, 17, 17, 0.08);
        border-radius: 19px;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 8px 22px rgba(47, 40, 24, 0.045);
        color: var(--home-ink);
    }

    #features .feature-accordion-header .tab-icon {
        display: flex;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: rgba(17, 17, 17, 0.055);
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    #features .feature-accordion-header.active {
        border-color: rgba(17, 17, 17, 0.8);
        background: var(--home-ink);
        box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16);
        color: white;
    }

    #features .feature-accordion-header.active .tab-icon {
        background: rgba(254, 205, 26, 0.16);
        color: var(--home-gold);
    }

    #features .feature-content-block,
    #features .feature-content-block.active {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100%;
        min-height: 0;
        margin: 0 0 9px !important;
        padding: 7px !important;
        border-radius: 26px !important;
        transform: none;
    }

    #features .feature-content-block {
        display: none !important;
    }

    #features .feature-content-block.active {
        display: block !important;
        animation: pricingFamilyIn 420ms cubic-bezier(.16, 1, .3, 1) both;
    }

    #features .feature-content-block::before {
        display: none;
    }

    #features .feature-content-block > .grid {
        grid-template-columns: 1fr !important;
    }

    #features .tab-visual-container {
        min-height: 255px;
        border-radius: 21px !important;
    }

    #features .tab-visual-mockup {
        width: 88%;
        border-radius: 16px !important;
    }

    #features .feature-content-block > .grid > div:last-child {
        gap: 18px !important;
        padding: 27px 18px 29px !important;
    }

    #features .feature-content-block h3 {
        font-size: 31px !important;
    }

    #features .feature-content-block .premium-subtitle {
        font-size: 17px !important;
    }

    .pricing-hub-zone {
        padding-top: 82px;
        padding-bottom: 80px;
    }

    .pricing-hub-intro {
        padding-bottom: 24px !important;
    }

    .pricing-family-nav {
        display: none !important;
    }

    .pricing-family {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .pricing-family-accordion {
        position: sticky;
        z-index: 42;
        top: 82px;
        display: flex;
        width: calc(100% - 36px);
        min-height: 78px;
        margin: 8px 18px;
        padding: 13px 14px;
        border: 1px solid rgba(17, 17, 17, 0.09);
        border-radius: 21px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 10px 26px rgba(47, 40, 24, 0.055);
        color: var(--home-ink);
        align-items: center;
        justify-content: space-between;
        font-family: "Geist", sans-serif;
        text-align: left;
        cursor: pointer;
        transition: color 280ms ease, background 320ms ease, border-color 320ms ease, box-shadow 360ms ease;
    }

    .pricing-family-accordion > span {
        display: grid;
        min-width: 0;
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 2px 7px;
        align-items: center;
    }

    .pricing-family-accordion small {
        grid-row: 1 / span 2;
        color: rgba(17, 17, 17, 0.34);
        font-size: 9px;
        font-weight: 720;
        letter-spacing: 0.1em;
    }

    .pricing-family-accordion strong {
        font-family: "Albert Sans", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 620;
        letter-spacing: -0.025em;
    }

    .pricing-family-accordion em {
        color: rgba(17, 17, 17, 0.46);
        font-size: 10px;
        font-style: normal;
    }

    .pricing-family-accordion > i {
        position: relative;
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border-radius: 50%;
        background: rgba(17, 17, 17, 0.06);
    }

    .pricing-family-accordion > i::before,
    .pricing-family-accordion > i::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 11px;
        height: 1.5px;
        border-radius: 999px;
        background: currentColor;
        content: "";
        transform: translate(-50%, -50%);
        transition: transform 320ms cubic-bezier(.16, 1, .3, 1);
    }

    .pricing-family-accordion > i::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .pricing-family.is-active .pricing-family-accordion {
        border-color: rgba(17, 17, 17, 0.82);
        background: var(--home-ink);
        box-shadow: 0 15px 32px rgba(17, 17, 17, 0.16);
        color: white;
    }

    .pricing-family.is-active .pricing-family-accordion small,
    .pricing-family.is-active .pricing-family-accordion em {
        color: rgba(255, 255, 255, 0.5);
    }

    .pricing-family.is-active .pricing-family-accordion > i {
        background: var(--home-gold);
        color: var(--home-ink);
    }

    .pricing-family.is-active .pricing-family-accordion > i::after {
        transform: translate(-50%, -50%) rotate(0);
    }

    .pricing-family:not(.is-active) > :not(.pricing-family-accordion) {
        display: none !important;
    }

    .pricing-family.is-active > :not(.pricing-family-accordion) {
        animation: pricingFamilyIn 420ms cubic-bezier(.16, 1, .3, 1) both;
    }

    #pricing.is-active,
    #growth-addons.is-active,
    #hosting-plans.is-active {
        margin-top: 0 !important;
    }

    #pricing > .px-5,
    #growth-addons > .section-container,
    #hosting-plans > div {
        padding-top: 8px !important;
        padding-bottom: 18px !important;
    }

    #pricing > .px-5 > div {
        border-radius: 27px !important;
    }

    #pricing .website-pricing-detail [data-price-content] ul {
        grid-template-columns: 1fr;
        gap: 11px !important;
    }

    #pricing .website-pricing-detail .plan-card-premium {
        padding: 25px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-family.is-active,
    .pricing-family.is-active > :not(.pricing-family-accordion),
    #features .feature-content-block.active {
        animation: none !important;
    }

    #features .feature-tab-btn,
    #features .tab-visual-mockup,
    .pricing-family-nav button,
    .pricing-family-accordion,
    .pricing-family-accordion > i::before,
    .pricing-family-accordion > i::after {
        transition: none !important;
    }
}

/* ========================================================================== */
/* Wider creative-agency composition: hero and client showcase                */
/* ========================================================================== */

.section-container {
    width: 100%;
    max-width: 1500px !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

header[data-kite-global="site-header"] {
    max-width: 1120px !important;
}

#about {
    min-height: 900px;
    padding-top: 154px !important;
    padding-bottom: 88px !important;
}

#about .section-container {
    max-width: 1500px !important;
    grid-template-columns: minmax(520px, 0.92fr) minmax(610px, 1.08fr) !important;
    gap: clamp(52px, 5vw, 90px) !important;
}

#about .section-container > .flex:first-child {
    position: relative;
    z-index: 4;
}

#about .hero-title {
    max-width: 720px;
    font-size: clamp(64px, 5.15vw, 84px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.063em !important;
    text-wrap: balance;
}

#about .hero-title b {
    font-weight: 720;
}

#about .hero-title u {
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

#about .premium-subtitle {
    max-width: 680px;
    font-size: 21px !important;
    line-height: 1.48 !important;
}

#about [data-editable="hero-desc"] {
    max-width: 690px;
    font-size: 16px;
    line-height: 1.68;
}

.hero-creative-stage {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 700px;
}

.hero-stage-meta {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(17, 17, 17, 0.5);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.hero-stage-meta span:last-child {
    color: rgba(17, 17, 17, 0.34);
}

.hero-stage-canvas {
    position: absolute;
    inset: 36px 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 46px;
    background:
        radial-gradient(circle at 18% 20%, rgba(254, 205, 26, 0.22), transparent 27%),
        radial-gradient(circle at 90% 74%, rgba(132, 230, 246, 0.2), transparent 31%),
        #17191a;
    box-shadow: 0 44px 100px rgba(31, 28, 21, 0.22);
    isolation: isolate;
}

.hero-stage-canvas::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.hero-stage-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero-stage-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.hero-stage-orb--yellow {
    top: -90px;
    left: -40px;
    width: 300px;
    height: 300px;
    background: rgba(254, 247, 175, 0.2);
}

.hero-stage-orb--blue {
    right: -85px;
    bottom: -80px;
    width: 330px;
    height: 330px;
    background: rgba(132, 230, 246, 0.14);
}

.hero-project {
    position: absolute;
    z-index: 3;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: #f7f6f2;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.36);
    color: var(--home-ink);
    flex-direction: column;
    transform-origin: center;
    transition: transform 650ms cubic-bezier(.16, 1, .3, 1), box-shadow 650ms ease;
}

.hero-project:hover {
    z-index: 8;
    box-shadow: 0 42px 90px rgba(0, 0, 0, 0.44);
}

.hero-project--primary {
    top: 70px;
    left: 42px;
    width: 74%;
    height: 390px;
    transform: rotate(-2.2deg);
}

.hero-project--primary:hover {
    transform: rotate(-0.6deg) translateY(-10px);
}

.hero-project--secondary {
    z-index: 4;
    right: 34px;
    bottom: 45px;
    width: 53%;
    height: 290px;
    transform: rotate(2.7deg);
}

.hero-project--secondary:hover {
    transform: rotate(0.8deg) translateY(-9px);
}

.hero-project-bar {
    display: grid;
    min-height: 42px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    background: rgba(255, 255, 255, 0.92);
    align-items: center;
    grid-template-columns: 54px 1fr 26px;
    color: rgba(17, 17, 17, 0.48);
    font-size: 9px;
    font-weight: 620;
    letter-spacing: 0.04em;
}

.hero-project-bar > span:nth-child(2) {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-project-bar > span:last-child {
    text-align: right;
}

.hero-window-dots {
    display: flex;
    gap: 5px;
}

.hero-window-dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--home-coral);
}

.hero-window-dots i:nth-child(2) {
    background: var(--home-yellow);
}

.hero-window-dots i:nth-child(3) {
    background: var(--home-blue);
}

.hero-project-image {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #111;
}

.hero-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.01);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

.hero-project:hover .hero-project-image img {
    transform: scale(1.055);
}

.hero-performance-card {
    position: absolute;
    z-index: 6;
    bottom: 34px;
    left: 28px;
    width: 238px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: rgba(20, 22, 23, 0.9);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    color: white;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hero-performance-topline,
.hero-performance-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-performance-topline {
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-live-dot {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(132, 230, 246, 0.13);
    color: var(--home-blue);
    letter-spacing: 0.05em;
}

.hero-performance-score {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.hero-performance-score strong {
    font-family: "Albert Sans", sans-serif;
    font-size: 38px;
    font-weight: 470;
    letter-spacing: -0.06em;
    line-height: 1;
}

.hero-performance-score span {
    padding-bottom: 3px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
}

.hero-performance-graph {
    display: block;
    width: 100%;
    height: 62px;
    margin: 11px 0 7px;
}

.hero-performance-footer {
    color: rgba(255, 255, 255, 0.44);
    font-size: 8px;
}

.hero-stage-stamp {
    position: absolute;
    z-index: 7;
    top: 25px;
    right: 27px;
    display: flex;
    padding: 10px 14px 10px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    align-items: center;
    gap: 9px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
    color: var(--home-ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hero-stage-stamp img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

/* Client logo showcase */
.client-logo-showcase {
    z-index: 14;
    padding: 26px 0 116px !important;
}

.client-logo-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
    align-items: end;
    margin-bottom: 42px;
}

.client-logo-header > div:first-child {
    display: flex;
    max-width: 980px;
    flex-direction: column;
    gap: 16px;
}

.client-logo-header h2 {
    margin: 0;
    font-family: "Albert Sans", sans-serif;
    font-size: clamp(42px, 4.2vw, 66px);
    font-weight: 430;
    letter-spacing: -0.055em;
    line-height: 1.02;
    text-wrap: balance;
}

.client-logo-proof {
    display: flex;
    min-width: 280px;
    padding: 19px 22px;
    border-top: 1px solid rgba(17, 17, 17, 0.16);
    border-bottom: 1px solid rgba(17, 17, 17, 0.16);
    align-items: center;
    gap: 22px;
}

.client-logo-proof strong {
    font-family: "Albert Sans", sans-serif;
    font-size: 35px;
    font-weight: 580;
    letter-spacing: -0.06em;
}

.client-logo-proof strong span {
    color: rgba(17, 17, 17, 0.36);
    font-size: 16px;
}

.client-logo-proof p {
    margin: 0;
    color: rgba(17, 17, 17, 0.56);
    font-size: 12px;
    line-height: 1.4;
}

#client-logos .overflow-hidden {
    overflow: visible !important;
}

#client-logos .marquee-track {
    display: grid !important;
    width: 100% !important;
    gap: 10px !important;
    animation: none !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

#client-logos .marquee-track > a {
    display: flex !important;
    height: 138px;
    padding: 25px;
    border: 1px solid rgba(17, 17, 17, 0.075);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.57);
    align-items: center;
    justify-content: center;
    opacity: 0.62;
    transition: opacity 280ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1), background 280ms ease, box-shadow 280ms ease;
}

#client-logos .marquee-track > a:hover {
    z-index: 3;
    background: white;
    box-shadow: 0 20px 48px rgba(47, 40, 24, 0.09);
    opacity: 1;
    transform: translateY(-5px);
}

#client-logos .marquee-track > a img {
    width: auto !important;
    height: auto !important;
    max-width: 150px;
    max-height: 58px;
    object-fit: contain;
    filter: grayscale(1) contrast(0.85);
    transition: filter 280ms ease, transform 280ms ease;
}

#client-logos .marquee-track > a:hover img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.05);
}

#client-logos .marquee-track > a:nth-child(5),
#client-logos .marquee-track > a:nth-child(9),
#client-logos .marquee-track > a:nth-child(10),
#client-logos .marquee-track > a:nth-child(11),
#client-logos .marquee-track > a:nth-child(12),
#client-logos .marquee-track > a:nth-child(16) {
    display: none !important;
}

/* Expand explicit inner wrappers that previously capped the composition. */
#pricing > .px-5,
#hosting-plans,
#work > div,
#contact > .px-5 {
    max-width: 1500px !important;
}

#work > div,
#contact > .px-5 {
    margin-right: auto;
    margin-left: auto;
}

#hosting-plans > div {
    max-width: 1380px !important;
}

@media (max-width: 1179px) {
    .section-container {
        padding-right: 28px !important;
        padding-left: 28px !important;
    }

    #about {
        min-height: 0;
    }

    #about .section-container {
        grid-template-columns: 1fr !important;
    }

    #about .section-container > .flex:first-child {
        max-width: 850px;
    }

    .hero-creative-stage {
        height: 690px;
    }

    .hero-stage-canvas {
        max-width: 850px;
    }

    .client-logo-header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .client-logo-proof {
        width: fit-content;
    }

    #client-logos .marquee-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .section-container {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #about {
        padding-top: 116px !important;
        padding-bottom: 64px !important;
    }

    #about .hero-title {
        font-size: clamp(48px, 13.5vw, 60px) !important;
        line-height: 0.98 !important;
    }

    #about .premium-subtitle {
        font-size: 18px !important;
    }

    .hero-creative-stage {
        height: 510px;
        margin-top: 8px;
    }

    .hero-stage-meta {
        padding: 0 3px;
        font-size: 8px;
    }

    .hero-stage-meta span:last-child {
        display: none;
    }

    .hero-stage-canvas {
        top: 28px;
        border-radius: 30px;
    }

    .hero-project--primary {
        top: 64px;
        left: 19px;
        width: calc(100% - 38px);
        height: 280px;
    }

    .hero-project--secondary {
        display: none;
    }

    .hero-performance-card {
        right: 18px;
        bottom: 20px;
        left: auto;
        width: 205px;
        padding: 15px;
    }

    .hero-performance-score strong {
        font-size: 32px;
    }

    .hero-performance-graph {
        height: 48px;
    }

    .hero-stage-stamp {
        top: 18px;
        right: 17px;
    }

    .client-logo-showcase {
        padding-top: 38px !important;
        padding-bottom: 76px !important;
    }

    .client-logo-header {
        margin-bottom: 28px;
    }

    .client-logo-header h2 {
        font-size: 40px;
    }

    .client-logo-proof {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }

    #client-logos .marquee-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    #client-logos .marquee-track > a {
        height: 105px;
        padding: 19px;
        border-radius: 19px;
    }

    #client-logos .marquee-track > a img {
        max-width: 115px;
        max-height: 45px;
    }
}

/* ========================================================================== */
/* Hero correction: quieter type and one clear, purposeful project showcase   */
/* ========================================================================== */

#about {
    min-height: 0;
    padding-top: 148px !important;
    padding-bottom: 76px !important;
}

#about .section-container {
    grid-template-columns: minmax(500px, 0.84fr) minmax(620px, 1.16fr) !important;
    gap: clamp(54px, 4.7vw, 78px) !important;
}

#about .section-container > .flex:first-child {
    gap: 34px !important;
}

#about .section-container > .flex:first-child > .flex:first-child {
    gap: 22px !important;
}

#about .hero-title {
    max-width: 630px;
    font-size: clamp(50px, 3.7vw, 62px) !important;
    line-height: 1.015 !important;
    letter-spacing: -0.057em !important;
}

#about .hero-title u {
    text-decoration-thickness: 1.5px;
    text-underline-offset: 6px;
}

#about .premium-subtitle {
    max-width: 610px;
    font-size: 19px !important;
    line-height: 1.48 !important;
}

#about [data-editable="hero-desc"] {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.66;
}

.hero-creative-stage {
    height: 590px;
}

.hero-stage-canvas {
    inset: 30px 0 0;
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 0%, rgba(254, 205, 26, 0.13), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(132, 230, 246, 0.11), transparent 38%),
        #17191a;
    box-shadow: 0 34px 80px rgba(31, 28, 21, 0.18);
}

.hero-stage-grid {
    opacity: 0.48;
}

.hero-stage-orb {
    opacity: 0.28;
}

.hero-project--primary {
    top: 28px;
    left: 28px;
    width: calc(100% - 56px);
    height: calc(100% - 116px);
    border-radius: 20px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
    transform: none;
}

.hero-project--primary:hover {
    box-shadow: 0 30px 66px rgba(0, 0, 0, 0.36);
    transform: translateY(-4px);
}

.hero-project--secondary,
.hero-stage-stamp {
    display: none !important;
}

.hero-performance-card {
    right: 22px;
    bottom: 62px;
    left: auto;
    width: 205px;
    padding: 15px 16px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    background: rgba(254, 247, 175, 0.96);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
    color: var(--home-ink);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-performance-topline {
    color: rgba(17, 17, 17, 0.52);
    font-size: 8px;
}

.hero-live-dot {
    padding: 4px 7px;
    background: var(--home-ink);
    color: white;
}

.hero-performance-score {
    margin-top: 13px;
}

.hero-performance-score strong {
    font-size: 34px;
}

.hero-performance-score span {
    color: rgba(17, 17, 17, 0.54);
}

.hero-performance-footer {
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid rgba(17, 17, 17, 0.1);
    color: rgba(17, 17, 17, 0.5);
    font-size: 7px;
}

.hero-stage-caption {
    position: absolute;
    z-index: 5;
    right: 252px;
    bottom: 29px;
    left: 30px;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    color: white;
}

.hero-stage-caption strong {
    font-family: "Albert Sans", sans-serif;
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.hero-stage-caption span {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.43);
    font-size: 8px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 1279px) {
    #about .section-container {
        grid-template-columns: 1fr !important;
        gap: 52px !important;
    }

    #about .section-container > .flex:first-child {
        max-width: 760px;
    }

    #about .hero-title {
        max-width: 680px;
        font-size: clamp(52px, 6.2vw, 62px) !important;
    }

    .hero-creative-stage {
        height: 620px;
    }
}

@media (max-width: 767px) {
    #about {
        padding-top: 112px !important;
        padding-bottom: 56px !important;
    }

    #about .section-container {
        gap: 42px !important;
    }

    #about .section-container > .flex:first-child {
        gap: 28px !important;
    }

    #about .section-container > .flex:first-child > .flex:first-child {
        gap: 18px !important;
    }

    #about .hero-title {
        font-size: clamp(36px, 10vw, 40px) !important;
        line-height: 1.025 !important;
    }

    #about .premium-subtitle {
        font-size: 17px !important;
    }

    #about [data-editable="hero-desc"] {
        font-size: 14px;
        line-height: 1.62;
    }

    .hero-creative-stage {
        height: 430px;
        margin-top: 0;
    }

    .hero-stage-canvas {
        inset: 24px 0 0;
        border-radius: 26px;
    }

    .hero-project--primary {
        top: 14px;
        left: 14px;
        width: calc(100% - 28px);
        height: calc(100% - 92px);
        border-radius: 16px;
    }

    .hero-project-bar {
        min-height: 34px;
        padding: 0 10px;
        grid-template-columns: 42px 1fr 20px;
        font-size: 7px;
    }

    .hero-stage-caption {
        right: 14px;
        bottom: 19px;
        left: 16px;
    }

    .hero-stage-caption strong {
        font-size: 12px;
    }

    .hero-stage-caption span {
        display: none;
    }

    .hero-performance-card {
        right: 11px;
        bottom: 54px;
        width: 166px;
        padding: 12px;
        border-radius: 15px;
    }

    .hero-performance-topline {
        font-size: 6px;
    }

    .hero-performance-score {
        margin-top: 9px;
    }

    .hero-performance-score strong {
        font-size: 28px;
    }

    .hero-performance-score span {
        font-size: 8px;
    }

    .hero-performance-footer {
        margin-top: 9px;
        padding-top: 8px;
        font-size: 6px;
    }

    .hero-performance-footer span:first-child {
        display: none;
    }
}

/* ========================================================================== */
/* Unified homepage width and focused section polish                          */
/* ========================================================================== */

#headache > .section-container,
#pricing > .px-5,
#work > div,
#contact > .px-5 {
    width: 100%;
    max-width: 1500px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

#hosting-plans {
    width: calc(100% - 40px);
    max-width: 1500px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

#hosting-plans > div {
    width: 100%;
    max-width: none !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

#pricing > .px-5 > div > .relative.z-10,
#contact > .px-5 > div > .relative.z-10 {
    width: 100%;
    max-width: none !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

/* Problem section */
#headache {
    padding-top: 116px !important;
    padding-bottom: 118px !important;
}

#headache .headache-header {
    margin-bottom: 54px !important;
}

#headache [data-editable="headache-title"] {
    max-width: 830px;
    margin: 0;
    font-family: "Albert Sans", sans-serif;
    font-size: clamp(44px, 4.15vw, 62px) !important;
    font-weight: 430 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.02 !important;
    text-wrap: balance;
}

#headache .headache-board {
    position: relative;
    padding: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 38px !important;
    background:
        radial-gradient(circle at 0 0, rgba(254, 205, 26, 0.16), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(132, 230, 246, 0.12), transparent 34%),
        #17191a !important;
    box-shadow: 0 34px 86px rgba(31, 28, 21, 0.16);
}

#headache .headache-board::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    pointer-events: none;
}

#headache .headache-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#headache .headache-card {
    position: relative;
    min-height: 285px;
    padding: 30px !important;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.075) !important;
    border-radius: 27px !important;
    background: rgba(255, 255, 255, 0.93) !important;
    box-shadow: none !important;
    justify-content: space-between;
    transform: translateY(0);
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1), background 320ms ease, box-shadow 420ms ease, border-color 320ms ease !important;
}

#headache .headache-card::before {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(17, 17, 17, 0.22);
    font-family: "Albert Sans", sans-serif;
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.12em;
}

#headache .headache-card:nth-child(1)::before { content: "01"; }
#headache .headache-card:nth-child(2)::before { content: "02"; }
#headache .headache-card:nth-child(3)::before { content: "03"; }
#headache .headache-card:nth-child(4)::before { content: "04"; }

#headache .headache-card::after {
    position: absolute;
    right: 30px;
    bottom: 0;
    left: 30px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--home-gold);
    content: "";
    opacity: 0;
    transform: scaleX(0.25);
    transform-origin: left;
    transition: opacity 320ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

#headache .headache-card:nth-child(2)::after { background: var(--home-coral); }
#headache .headache-card:nth-child(3)::after { background: var(--home-blue); }
#headache .headache-card:nth-child(4)::after { background: #d7c66c; }

#headache .headache-card:hover {
    z-index: 2;
    border-color: rgba(17, 17, 17, 0.13) !important;
    background: white !important;
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-8px);
}

#headache .headache-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

#headache .headache-card-icon {
    width: 58px !important;
    height: 58px !important;
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 18px !important;
    transition: color 320ms ease, background 320ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1) !important;
}

#headache .headache-card:hover .headache-card-icon {
    background: var(--home-ink) !important;
    color: white !important;
    transform: rotate(-5deg) scale(1.07);
}

#headache .headache-card h3 {
    margin-bottom: 2px;
    font-size: 23px !important;
    font-weight: 560 !important;
    letter-spacing: -0.035em;
}

#headache .headache-card p {
    max-width: 280px;
    font-size: 15px !important;
    line-height: 1.58 !important;
}

#headache .headache-resolution {
    display: flex !important;
    margin-top: 18px !important;
    padding: 22px 24px 22px 30px;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 25px;
    background: linear-gradient(110deg, rgba(254, 247, 175, 0.96), rgba(255, 255, 255, 0.72));
    align-items: center !important;
    justify-content: space-between;
    flex-direction: row !important;
    gap: 28px;
    text-align: left !important;
}

#headache .headache-resolution p {
    max-width: 720px;
    margin: 0 !important;
    color: var(--home-ink) !important;
    font-size: clamp(19px, 1.7vw, 25px) !important;
    font-weight: 460;
    letter-spacing: -0.03em;
    line-height: 1.25 !important;
}

#headache .headache-resolution a {
    margin-top: 0 !important;
    flex: 0 0 auto;
}

/* Strategic foundation */
#why-us {
    padding-top: 122px !important;
    padding-bottom: 112px !important;
}

#why-us::before {
    inset: 18px 20px;
    border-radius: 50px;
}

#why-us .foundation-intro > [data-editable="why-us-title"] {
    margin-bottom: 18px !important;
    font-size: clamp(44px, 4.15vw, 62px) !important;
}

#why-us .foundation-intro > [data-editable="why-us-subtitle"] {
    max-width: 850px !important;
    margin-bottom: 17px !important;
    font-size: 20px !important;
    line-height: 1.5 !important;
}

#why-us .foundation-intro > [data-editable="why-us-desc"] {
    max-width: 760px !important;
    margin-bottom: 44px !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

#why-us .foundation-shell {
    width: 100%;
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    padding: 66px 18px 30px !important;
    overflow: hidden;
    border-color: rgba(17, 17, 17, 0.075) !important;
    border-radius: 38px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(250, 249, 246, 0.62)),
        rgba(250, 249, 246, 0.82) !important;
    box-shadow: 0 24px 70px rgba(47, 40, 24, 0.075);
}

#why-us .pillars-grid {
    counter-reset: foundation-pillar;
    gap: 10px !important;
}

#why-us .pillars-grid > div {
    counter-increment: foundation-pillar;
    min-height: 280px !important;
    padding: 28px 20px 24px !important;
    overflow: hidden;
    border-radius: 24px !important;
    box-shadow: 0 8px 24px rgba(47, 40, 24, 0.045) !important;
    transform: translateY(0);
    transition: transform 440ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms ease, border-color 320ms ease, background 320ms ease !important;
}

#why-us .pillars-grid > div::before {
    position: absolute;
    top: 17px;
    left: 18px;
    color: rgba(17, 17, 17, 0.24);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.12em;
    content: "0" counter(foundation-pillar);
}

#why-us .pillars-grid > div:hover {
    z-index: 3;
    border-color: rgba(17, 17, 17, 0.14) !important;
    background: white !important;
    box-shadow: 0 28px 58px rgba(47, 40, 24, 0.13) !important;
    transform: translateY(-9px) !important;
}

#why-us .pillars-grid > div > .flex.flex-col.items-center > div:first-child {
    transition: color 320ms ease, background 320ms ease, transform 440ms cubic-bezier(.16, 1, .3, 1);
}

#why-us .pillars-grid > div:hover > .flex.flex-col.items-center > div:first-child {
    background: var(--home-ink) !important;
    color: white !important;
    transform: rotate(-5deg) scale(1.06);
}

#why-us .pillars-grid > div:hover > .flex.flex-col.items-center > div:first-child svg {
    color: white !important;
}

#why-us .pillars-grid > div > div:last-child {
    transition: width 440ms cubic-bezier(.16, 1, .3, 1);
}

#why-us .pillars-grid > div:hover > div:last-child {
    width: 72% !important;
}

#why-us .pillars-grid h4 {
    font-size: 12px !important;
}

#why-us .pillars-grid p {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

#why-us .foundation-shell > .flex:last-child > div {
    transition: transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms ease;
}

#why-us .foundation-shell > .flex:last-child:hover > div:first-child {
    transform: translateX(-4px);
}

#why-us .foundation-shell > .flex:last-child:hover > div:last-child {
    transform: translateX(4px);
}

#why-us .foundation-shell > .flex:last-child > div:nth-child(2):hover {
    box-shadow: 0 15px 34px rgba(47, 40, 24, 0.13);
    transform: rotate(-4deg) scale(1.05);
}

#why-us .process-section-wrapper {
    margin-top: 0 !important;
    padding: 10px;
    border: 1px solid rgba(17, 17, 17, 0.075);
    border-radius: 30px;
    background: rgba(235, 231, 223, 0.86);
}

#why-us .process-card {
    position: relative;
    border-radius: 23px !important;
    outline: none;
    transition: flex 620ms cubic-bezier(.16, 1, .3, 1), background 380ms ease, box-shadow 460ms ease, border-color 380ms ease, transform 460ms cubic-bezier(.16, 1, .3, 1) !important;
}

#why-us .process-card::before {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 26px;
    left: 26px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: var(--home-gold);
    content: "";
    opacity: 0;
    transform: scaleX(0.25);
    transition: opacity 320ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1);
}

#why-us .process-card:nth-child(2)::before { background: var(--home-blue); }
#why-us .process-card:nth-child(3)::before { background: var(--home-coral); }

#why-us .process-card.active::before,
#why-us .process-card:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
}

#why-us .process-card:hover:not(.active) {
    border-color: rgba(17, 17, 17, 0.13);
    background: rgba(255, 255, 255, 0.86);
    transform: translateY(-4px);
}

#why-us .process-card:focus-visible {
    outline: 3px solid rgba(132, 230, 246, 0.72);
    outline-offset: 3px;
}

#why-us .process-card .card-visual img {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
    object-fit: cover !important;
    object-position: center;
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}

#why-us .process-card .card-visual > .relative {
    width: 100%;
    height: 100%;
    padding: 16px !important;
}

#why-us .process-card .card-visual > .relative > div {
    width: 80% !important;
    height: 84% !important;
    max-width: 290px;
    max-height: 330px;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 24px 54px rgba(38, 31, 52, 0.2) !important;
}

#why-us .process-card.active .card-visual img {
    transform: scale(1.035);
}

@media (max-width: 1100px) {
    #headache .headache-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #headache .headache-card {
        min-height: 245px;
    }
}

@media (max-width: 767px) {
    #headache > .section-container,
    #pricing > .px-5,
    #work > div,
    #contact > .px-5 {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #hosting-plans {
        width: calc(100% - 20px);
    }

    #hosting-plans > div,
    #pricing > .px-5 > div > .relative.z-10,
    #contact > .px-5 > div > .relative.z-10 {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    #headache {
        padding-top: 74px !important;
        padding-bottom: 74px !important;
    }

    #headache .headache-header {
        margin-bottom: 34px !important;
    }

    #headache [data-editable="headache-title"] {
        font-size: 38px !important;
    }

    #headache .headache-board {
        padding: 8px !important;
        border-radius: 29px !important;
    }

    #headache .headache-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #headache .headache-card {
        min-height: 220px;
        padding: 24px !important;
        border-radius: 22px !important;
    }

    #headache .headache-card p {
        max-width: 270px;
    }

    #headache .headache-resolution {
        padding: 24px;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 20px;
    }

    #headache .headache-resolution p {
        font-size: 20px !important;
    }

    #why-us {
        padding-top: 82px !important;
        padding-bottom: 78px !important;
    }

    #why-us::before {
        inset: 8px 7px;
        border-radius: 32px;
    }

    #why-us .foundation-intro > [data-editable="why-us-title"] {
        font-size: 40px !important;
    }

    #why-us .foundation-intro > [data-editable="why-us-subtitle"] {
        font-size: 18px !important;
    }

    #why-us .foundation-intro > [data-editable="why-us-desc"] {
        margin-bottom: 32px !important;
        font-size: 15px !important;
    }

    #why-us .foundation-shell {
        padding: 26px 9px 18px !important;
        border-radius: 28px !important;
    }

    #why-us .pillars-grid {
        gap: 7px !important;
    }

    #why-us .pillars-grid > div {
        min-height: 235px !important;
        padding: 25px 22px 21px !important;
    }

    #why-us .process-section-wrapper {
        padding: 7px;
        border-radius: 26px;
    }

    #why-us .process-card {
        min-height: 0;
        padding: 22px !important;
    }

    #why-us .process-card .card-visual {
        min-height: 330px;
    }

    #why-us .process-card .card-visual > .relative > div {
        width: 78% !important;
        height: 84% !important;
        max-width: 260px;
        max-height: 290px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #headache .headache-card,
    #headache .headache-card::after,
    #headache .headache-card-icon,
    #why-us .pillars-grid > div,
    #why-us .pillars-grid > div > .flex.flex-col.items-center > div:first-child,
    #why-us .process-card,
    #why-us .process-card::before {
        transition: none !important;
    }
}