/* Yaskadox public home page -------------------------------------------------
   This layer extends the shared design system without redefining its tokens. */

.home-page {
    --home-content-max-width: 77.5rem;

    min-width: 0;
    overflow-x: clip;
    background: var(--color-surface);
}

.home-page main,
.home-page section,
.home-page article,
.home-page aside,
.home-page figure,
.home-page div {
    min-width: 0;
}

.home-page main > section[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.home-header {
    border-block-end-color: color-mix(
        in srgb,
        var(--color-border) 82%,
        transparent
    );
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 1px 0 rgb(20 33 61 / 3%);
}

.home-header .site-header__inner {
    min-width: 0;
}

.home-header .site-header__brand {
    flex: 0 0 auto;
}

.home-header .site-header__desktop-nav,
.home-header .site-header__actions {
    display: none;
}

.home-header .site-header__menu-toggle {
    display: inline-flex;
    min-width: 3.25rem;
    justify-content: center;
}

.home-header .site-header__mobile-menu {
    width: 100%;
}

.home-header .site-header__mobile-menu .container {
    min-width: 0;
}

.home-header .site-header__mobile-actions .button {
    width: 100%;
}

.home-eyebrow {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.home-section {
    position: relative;
    padding-block: clamp(var(--space-16), 9vw, var(--space-24));
    background: var(--color-surface);
}

.home-section--muted {
    background: var(--color-background);
}

.home-section--ink {
    background: var(--color-text);
    color: var(--color-surface);
}

.home-section--ink h2,
.home-section--ink h3,
.home-section--ink h4 {
    color: var(--color-surface);
}

.home-section--ink .section-header__eyebrow {
    color: #a9c6ff;
}

.home-section--ink .section-header__description {
    color: #c7d1df;
}

.home-ai,
.home-infrastructure,
.home-packages,
.home-panels {
    isolation: isolate;
}

.home-core__content,
.home-infrastructure__content {
    min-width: 0;
}

/* Hero ------------------------------------------------------------------- */

.home-hero {
    position: relative;
    overflow: clip;
    border-block-end: var(--border-width) solid var(--color-border);
    background: var(--color-background);
}

.home-hero::before,
.home-hero::after {
    position: absolute;
    z-index: 0;
    border: var(--border-width) solid color-mix(
        in srgb,
        var(--color-primary) 12%,
        transparent
    );
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home-hero::before {
    width: 24rem;
    height: 24rem;
    inset-block-start: -16rem;
    inset-inline-end: -12rem;
}

.home-hero::after {
    width: 14rem;
    height: 14rem;
    inset-block-end: -10rem;
    inset-inline-start: -8rem;
}

.home-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: clamp(var(--space-10), 7vw, var(--space-20));
    padding-block: clamp(var(--space-12), 9vw, var(--space-24));
}

.home-hero__content {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
}

.home-hero__title {
    max-width: 14ch;
    margin: 0;
    color: var(--color-text);
    font-size: clamp(2.35rem, 9vw, 4.75rem);
    line-height: 1.02;
}

.home-hero__title-line {
    display: inline;
}

.home-hero__description {
    max-width: 39rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
}

.home-hero__actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--space-3);
}

.home-hero__actions .button {
    width: 100%;
}

.home-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-1) 0 0;
    padding: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    list-style: none;
}

.home-hero__proof li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.home-hero__proof li::before {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-success);
    content: "";
}

/* Product builder preview ------------------------------------------------ */

.home-builder {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: var(--border-width) solid color-mix(
        in srgb,
        var(--color-primary) 22%,
        var(--color-border)
    );
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.home-builder::after {
    position: absolute;
    inset: 0;
    border: 3px solid rgb(255 255 255 / 52%);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.home-builder__bar {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--space-3);
    border-block-end: var(--border-width) solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: var(--font-size-xs);
    overflow: hidden;
}

.home-builder__bar::after {
    position: absolute;
    height: 2px;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--color-primary);
    content: "";
    opacity: 0.2;
    pointer-events: none;
    transform: scaleX(0.24);
    transform-origin: left center;
    animation: home-builder-progress 5.5s ease-in-out infinite alternate;
}

.home-builder__bar > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-builder__lights {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.3rem;
}

.home-builder__lights i {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-disabled);
}

.home-builder__lights i:first-child {
    background: var(--color-danger);
}

.home-builder__lights i:nth-child(2) {
    background: var(--color-warning);
}

.home-builder__lights i:last-child {
    background: var(--color-success);
}

.home-builder__live {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
    color: var(--color-success-strong);
    font-weight: var(--font-weight-semibold);
}

.home-builder__live i {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--color-success);
}

.home-builder__workspace {
    display: grid;
    grid-template-columns: minmax(4.9rem, 0.32fr) minmax(0, 1fr);
    min-height: 15rem;
}

.home-builder__sidebar {
    padding: var(--space-4) var(--space-2);
    border-inline-end: var(--border-width) solid var(--color-border);
    background: #12203c;
    color: #d8e0ec;
}

.home-builder__sidebar > p {
    margin: 0 0 var(--space-3);
    color: #9dacbf;
    font-size: 0.59rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    overflow-wrap: normal;
    text-transform: uppercase;
    word-break: normal;
}

.home-builder__sidebar ol {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-builder__sidebar li {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    color: #aeb9c8;
    font-size: 0.59rem;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: normal;
}

.home-builder__sidebar li span {
    display: grid;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border: 1px solid #60708a;
    border-radius: 50%;
    font-size: 0.55rem;
}

.home-builder__sidebar li.is-complete {
    color: #d9f5e2;
}

.home-builder__sidebar li.is-complete span {
    border-color: var(--color-success);
    background: var(--color-success);
    color: var(--color-on-primary);
}

.home-builder__sidebar li.is-current {
    background: #223658;
    color: var(--color-surface);
}

.home-builder__sidebar li.is-current span {
    border-color: #85aefc;
    color: #c6d9ff;
}

.home-builder__canvas {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-background);
}

.home-builder__site-nav {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.home-builder__site-nav span {
    display: block;
    width: 1.3rem;
    height: 0.2rem;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.home-builder__site-nav .home-builder__site-logo {
    width: 1rem;
    height: 0.65rem;
    margin-inline-end: auto;
    background: var(--color-primary);
}

.home-builder__site-content {
    padding: clamp(var(--space-4), 5vw, var(--space-8));
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.home-builder__site-content p {
    margin: 0 0 var(--space-2);
    color: var(--color-primary);
    font-size: 0.58rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.home-builder__site-content h2 {
    max-width: 12ch;
    margin: 0 0 var(--space-2);
    font-size: clamp(1rem, 5vw, 1.65rem);
}

.home-builder__site-content > span {
    display: block;
    margin-block-end: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.65rem;
}

.home-builder__site-content > strong {
    display: inline-flex;
    min-height: 1.5rem;
    align-items: center;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.6rem;
}

.home-builder__site-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.home-builder__site-cards span {
    min-height: 2.75rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.home-builder__assistant {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border-block-start: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
}

.home-builder__assistant strong,
.home-builder__assistant p {
    margin: 0;
}

.home-builder__assistant strong {
    font-size: var(--font-size-sm);
}

.home-builder__assistant p {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.home-builder__assistant dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}

.home-builder__assistant dl > div {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
}

.home-builder__assistant dt {
    color: var(--color-text-muted);
    font-size: 0.62rem;
}

.home-builder__assistant dd {
    margin: var(--space-1) 0 0;
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.home-builder__palette {
    display: flex;
    gap: var(--space-1);
}

.home-builder__palette i {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid rgb(20 33 61 / 10%);
    border-radius: 50%;
    background: var(--color-primary);
}

.home-builder__palette i:nth-child(2) {
    background: var(--color-secondary);
}

.home-builder__palette i:last-child {
    background: var(--color-warning);
}

/* Site types ------------------------------------------------------------- */

.home-site-types {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.home-site-types .feature-card {
    height: 100%;
}

.home-site-types .feature-card__symbol {
    font-family: var(--font-family-mono);
}

/* Three steps ------------------------------------------------------------ */

.home-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: home-step;
}

.home-step {
    position: relative;
    min-height: 15rem;
    padding: var(--space-6);
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.home-step::after {
    position: absolute;
    width: 6rem;
    height: 6rem;
    inset-block-end: -3.75rem;
    inset-inline-end: -3rem;
    border: 1px solid color-mix(
        in srgb,
        var(--color-primary) 18%,
        var(--color-border)
    );
    border-radius: 50%;
    content: "";
}

.home-step__number {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin-block-end: var(--space-6);
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.home-step h3 {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-xl);
}

.home-step p {
    margin: 0;
    color: var(--color-text-muted);
}

/* AI task map ------------------------------------------------------------ */

.home-ai__layout {
    display: grid;
    gap: var(--space-10);
}

.home-ai__intro {
    display: grid;
    align-content: start;
}

.home-ai__core-mark {
    position: relative;
    display: grid;
    width: min(100%, 20rem);
    aspect-ratio: 1;
    margin: var(--space-4) auto 0;
    place-items: center;
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    background: var(--color-background);
}

.home-ai__core-mark::before,
.home-ai__core-mark::after {
    position: absolute;
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    content: "";
}

.home-ai__core-mark::before {
    width: 72%;
    height: 72%;
}

.home-ai__core-mark::after {
    width: 43%;
    height: 43%;
    border-color: color-mix(
        in srgb,
        var(--color-primary) 38%,
        var(--color-border)
    );
    background: var(--color-surface);
}

.home-ai__core-mark > span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.home-ai__core-mark > i {
    position: absolute;
    z-index: 1;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: var(--shadow-sm);
}

.home-ai__core-mark > i:nth-of-type(1) {
    inset-block-start: 9%;
}

.home-ai__core-mark > i:nth-of-type(2) {
    inset-inline-end: 9%;
}

.home-ai__core-mark > i:nth-of-type(3) {
    inset-block-end: 9%;
}

.home-ai__core-mark > i:nth-of-type(4) {
    inset-inline-start: 9%;
}

.home-ai__tasks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-ai__tasks li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.home-ai__tasks li > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-secondary-soft);
    color: var(--color-secondary-strong);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.home-ai__tasks p {
    margin: 0;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* Ready modular panel ---------------------------------------------------- */

.home-core {
    overflow: clip;
}

.home-core__layout {
    display: grid;
    align-items: center;
    gap: clamp(var(--space-10), 8vw, var(--space-20));
}

.home-core__benefits {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-core__benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: #e4eaf2;
}

.home-core__benefits li span {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.home-core-preview {
    display: grid;
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid #43506a;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 28px 64px rgb(0 0 0 / 24%);
}

.home-core-preview__sidebar {
    padding: var(--space-4);
    background: #111d35;
    color: #dce4ef;
}

.home-core-preview__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid #39465e;
}

.home-core-preview__brand > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
}

.home-core-preview__sidebar ul {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

.home-core-preview__sidebar li {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: #aeb9c8;
    font-size: var(--font-size-xs);
}

.home-core-preview__sidebar li.is-active {
    background: #263957;
    color: var(--color-surface);
}

.home-core-preview__main {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-background);
}

.home-core-preview__main > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.home-core-preview__main h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-lg);
}

.home-core-preview__main header > span {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.home-core-preview__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.home-core-preview__metrics article {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.home-core-preview__metrics span,
.home-core-preview__metrics strong {
    display: block;
}

.home-core-preview__metrics span {
    margin-block-end: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.home-core-preview__metrics strong {
    color: var(--color-text);
    font-size: var(--font-size-xl);
}

.home-core-preview__activity {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
}

.home-core-preview__activity i {
    display: block;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
}

.home-core-preview__activity i:nth-of-type(2) {
    width: 84%;
}

.home-core-preview__activity i:nth-of-type(3) {
    width: 62%;
}

/* Site-specific panel tabs ----------------------------------------------- */

.home-panel-tabs {
    min-width: 0;
}

.home-panel-tabs__list {
    display: flex;
    width: 100%;
    max-width: 56rem;
    margin: 0 auto var(--space-6);
    padding: var(--space-1);
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    scrollbar-width: thin;
    scroll-snap-type: inline mandatory;
}

.home-panel-tabs__tab {
    min-height: var(--control-height-md);
    flex: 1 0 max-content;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    scroll-snap-align: start;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.home-panel-tabs__tab:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--color-primary);
}

.home-panel-tabs__tab[aria-selected="true"],
.home-panel-tabs__tab.is-active {
    background: var(--color-surface);
    color: var(--color-primary-strong);
    box-shadow: var(--shadow-sm);
}

.home-panel-tabs__tab:focus-visible {
    position: relative;
    z-index: 1;
    outline-offset: -2px;
}

.home-panel-tabs__tab:disabled,
.home-panel-tabs__tab[aria-disabled="true"] {
    color: var(--color-disabled);
    opacity: 0.72;
}

.home-panel {
    display: grid;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.home-panel__sidebar {
    padding: var(--space-4);
    background: #13203a;
    color: #dce4ef;
}

.home-panel__identity {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid #3a4860;
}

.home-panel__identity > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-bold);
}

.home-panel__identity strong,
.home-panel__identity small {
    display: block;
}

.home-panel__identity strong {
    color: var(--color-surface);
    font-size: var(--font-size-sm);
}

.home-panel__identity small {
    color: #aeb9c8;
    font-size: var(--font-size-xs);
}

.home-panel__sidebar nav {
    margin-block-start: var(--space-4);
    overflow-x: auto;
    scrollbar-width: thin;
}

.home-panel__sidebar ul {
    display: flex;
    gap: var(--space-2);
    min-width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-panel__sidebar li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: #aeb9c8;
    font-size: var(--font-size-xs);
}

.home-panel__sidebar li > span {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #6d7b91;
}

.home-panel__sidebar li.is-active {
    background: #263957;
    color: var(--color-surface);
}

.home-panel__sidebar li.is-active > span {
    background: #8eb4ff;
}

.home-panel__dashboard {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--color-background);
}

.home-panel__dashboard > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.home-panel__dashboard header span,
.home-panel__dashboard h3 {
    display: block;
    margin: 0;
}

.home-panel__dashboard header > div > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.home-panel__dashboard h3 {
    font-size: var(--font-size-xl);
}

.home-panel__status {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.home-panel__status i {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-success);
}

.home-panel__metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.home-panel__metrics article {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.home-panel__metrics span,
.home-panel__metrics strong {
    display: block;
}

.home-panel__metrics span {
    margin-block-end: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.home-panel__metrics strong {
    color: var(--color-text);
    font-size: var(--font-size-xl);
}

.home-panel__list {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.home-panel__list h4 {
    margin-block-end: var(--space-3);
    font-size: var(--font-size-md);
}

.home-panel__list ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-panel__list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.home-panel__list li > span {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Domain and hosting ----------------------------------------------------- */

.home-infrastructure__layout {
    display: grid;
    align-items: center;
    gap: clamp(var(--space-10), 8vw, var(--space-20));
}

.home-infrastructure__features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-infrastructure__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text);
}

.home-infrastructure__features li > span {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-soft);
    color: var(--color-success-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.home-infrastructure__preview {
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.home-infrastructure__preview > header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-block-end: var(--border-width) solid var(--color-border);
}

.home-infrastructure__preview h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.home-infrastructure__preview-mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-bold);
}

.home-infrastructure__preview dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.home-infrastructure__preview dl > div {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-block-end: var(--border-width) solid var(--color-border);
}

.home-infrastructure__preview dl > div:last-child {
    border-block-end: 0;
}

.home-infrastructure__preview dl > div.is-primary {
    background: var(--color-primary-soft);
}

.home-infrastructure__preview dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.home-infrastructure__preview dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
}

.home-infrastructure__preview dd strong {
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.home-infrastructure__preview dd span {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* Packages --------------------------------------------------------------- */

.home-packages__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-5);
}

.home-package {
    min-width: 0;
}

.home-package .package-card__price {
    min-height: 3.25rem;
    align-items: center;
    padding-block: var(--space-3);
    border-block: var(--border-width) solid var(--color-border);
    color: var(--color-primary-strong);
}

.home-package .package-card__price strong {
    font-size: var(--font-size-lg);
}

.home-package .package-card__features li {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: var(--border-width) solid var(--color-border);
}

.home-package .package-card__features li::before {
    display: none;
}

.home-package .package-card__features li > span {
    color: var(--color-text-muted);
}

.home-package .package-card__features li > strong {
    color: var(--color-text);
    text-align: end;
}

.home-packages__empty {
    margin: 0;
    padding: var(--space-10);
    border: var(--border-width) dashed var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-background);
    color: var(--color-text-muted);
    text-align: center;
}

/* Why Yaskadox ----------------------------------------------------------- */

.home-why {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-why li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    min-height: 4.75rem;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.home-why li > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
}

.home-why li > strong {
    font-size: var(--font-size-sm);
}

/* FAQ and final call ----------------------------------------------------- */

.home-faq__layout {
    display: grid;
    gap: var(--space-8);
}

.home-faq .section-header {
    margin-block-end: 0;
}

.home-faq .faq-accordion {
    width: 100%;
    max-width: none;
}

.home-final-cta {
    padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    border-block-start: var(--border-width) solid #34425b;
    background: var(--color-text);
    color: var(--color-surface);
}

.home-final-cta__inner {
    display: grid;
    align-items: center;
    gap: var(--space-8);
}

.home-final-cta .home-eyebrow {
    margin-block-end: var(--space-3);
    color: #a9c6ff;
}

.home-final-cta h2 {
    max-width: 17ch;
    margin-block-end: var(--space-4);
    color: var(--color-surface);
}

.home-final-cta p:not(.home-eyebrow) {
    max-width: 42rem;
    margin: 0;
    color: #c7d1df;
}

.home-final-cta .button {
    width: 100%;
}

.home-page .site-footer {
    background: #0f1a30;
    border-block-start-color: #34425b;
    color: #c7d1df;
}

.home-page .site-footer__brand-name,
.home-page .site-footer__column-title {
    color: var(--color-surface);
}

.home-page .site-footer__brand-logo {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.home-page .site-footer__description,
.home-page .site-footer__bottom {
    color: #aeb9c8;
}

.home-page .site-footer__link-list a {
    color: #c7d1df;
}

.home-page .site-footer__link-list a:hover {
    color: var(--color-surface);
}

.home-page .site-footer__bottom {
    border-block-start-color: #34425b;
}

/* Shared interaction states ---------------------------------------------- */

.home-page a,
.home-page button,
.home-page summary {
    -webkit-tap-highlight-color: transparent;
}

.home-page button:disabled,
.home-page [aria-disabled="true"] {
    cursor: not-allowed;
}

.home-page .button:focus-visible,
.home-page .site-header__link:focus-visible,
.home-page .site-footer a:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

.home-section--ink .button:focus-visible,
.home-final-cta .button:focus-visible,
.home-page .site-footer a:focus-visible {
    outline-color: #a9c6ff;
}

/* 480px ------------------------------------------------------------------ */

@media (min-width: 30rem) {
    .home-hero__actions {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-hero__actions .button {
        width: auto;
    }

    .home-builder__workspace {
        grid-template-columns: minmax(6.75rem, 0.3fr) minmax(0, 1fr);
    }

    .home-builder__sidebar {
        padding: var(--space-4) var(--space-3);
    }

    .home-builder__sidebar li,
    .home-builder__sidebar > p {
        font-size: var(--font-size-xs);
    }

    .home-builder__assistant {
        grid-template-columns: minmax(0, 1.2fr) minmax(10rem, 0.8fr);
        align-items: center;
    }

    .home-site-types,
    .home-ai__tasks,
    .home-core__benefits,
    .home-infrastructure__features,
    .home-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-panel__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-infrastructure__preview dl > div {
        grid-template-columns: minmax(7rem, 0.45fr) minmax(0, 1fr);
        align-items: center;
    }

    .home-final-cta .button {
        width: auto;
        justify-self: start;
    }
}

/* 768px ------------------------------------------------------------------ */

@media (min-width: 48rem) {
    .home-section {
        padding-block: clamp(var(--space-20), 8vw, var(--space-24));
    }

    .home-hero__inner {
        padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    }

    .home-hero__title {
        font-size: clamp(3.5rem, 7vw, 4.75rem);
    }

    .home-builder__workspace {
        min-height: 19rem;
    }

    .home-builder__sidebar {
        padding: var(--space-5);
    }

    .home-builder__canvas {
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .home-builder__site-content > span {
        font-size: var(--font-size-xs);
    }

    .home-builder__site-content > strong {
        min-height: 1.9rem;
        font-size: var(--font-size-xs);
    }

    .home-site-types {
        gap: var(--space-5);
    }

    .home-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-step {
        min-height: 18rem;
        padding: var(--space-8);
    }

    .home-core-preview {
        grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr);
    }

    .home-core-preview__sidebar {
        padding: var(--space-5);
    }

    .home-core-preview__sidebar ul {
        display: grid;
        overflow: visible;
    }

    .home-core-preview__main,
    .home-panel__dashboard {
        padding: var(--space-6);
    }

    .home-panel {
        grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
    }

    .home-panel__sidebar {
        padding: var(--space-5);
    }

    .home-panel__sidebar nav {
        overflow: visible;
    }

    .home-panel__sidebar ul {
        display: grid;
        min-width: 0;
    }

    .home-panel__metrics article {
        padding: var(--space-5);
    }

    .home-packages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-why {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-faq__layout {
        grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
        align-items: start;
        gap: clamp(var(--space-8), 8vw, var(--space-20));
    }

    .home-final-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .home-final-cta .button {
        justify-self: end;
    }
}

/* 1024px: two-column content, mobile header remains active. -------------- */

@media (min-width: 64rem) {
    .home-hero__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(28rem, 1.08fr);
        gap: var(--space-12);
    }

    .home-builder__sidebar {
        padding: var(--space-4);
    }

    .home-hero__title {
        font-size: clamp(3.5rem, 5.5vw, 4.75rem);
    }

    .home-ai__layout {
        grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
    }

    .home-ai__intro .section-header {
        margin-block-end: 0;
    }

    .home-ai__core-mark {
        margin-inline-start: 0;
    }

    .home-core__layout,
    .home-infrastructure__layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-core__benefits,
    .home-infrastructure__features {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-core-preview {
        min-height: 26rem;
    }

    .home-panel__dashboard {
        padding: var(--space-8);
    }
}

/* The shared header changes at 1024px; the public page needs room for its
   longer navigation and therefore intentionally stays mobile until 1280px. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
    .home-header .site-header__desktop-nav,
    .home-header .site-header__actions {
        display: none !important;
    }

    .home-header .site-header__menu-toggle {
        display: inline-flex !important;
    }

    .home-header .site-header__mobile-menu:not([hidden]) {
        display: block !important;
    }
}

/* 1280px: full navigation ------------------------------------------------ */

@media (min-width: 80rem) {
    .home-page {
        --header-height: 4.625rem;
    }

    .home-page .container,
    .home-header .site-header__inner {
        width: min(100% - 3rem, var(--home-content-max-width));
    }

    .home-header .site-header__brand-logo {
        height: 2.875rem;
    }

    .home-header .site-header__desktop-nav {
        display: block;
        min-width: 0;
    }

    .home-header .site-header__nav-list,
    .home-header .site-header__actions {
        display: flex;
    }

    .home-header .site-header__nav-list {
        justify-content: center;
    }

    .home-header .site-header__actions {
        flex: 0 0 auto;
        align-items: center;
        gap: var(--space-2);
    }

    .home-header .site-header__link {
        padding-inline: var(--space-2);
        min-height: 2.5rem;
        font-size: 0.8125rem;
    }

    .home-header .site-header__action {
        min-height: 2.5rem;
        padding-inline: var(--space-3);
        font-size: 0.8125rem;
    }

    .home-header .site-header__menu-toggle,
    .home-header .site-header__mobile-menu {
        display: none !important;
    }

    .home-site-types {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-ai__tasks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-panel {
        grid-template-columns: minmax(14rem, 0.26fr) minmax(0, 1fr);
    }

    .home-hero__proof {
        color: var(--color-text);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
    }
}

/* 1440px ----------------------------------------------------------------- */

@media (min-width: 90rem) {
    .home-header .site-header__link {
        padding-inline: var(--space-3);
        font-size: var(--font-size-sm);
    }

    .home-header .site-header__action {
        padding-inline: var(--space-4);
        font-size: var(--font-size-sm);
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: var(--space-12);
        padding-block-start: var(--space-20);
        padding-block-end: var(--space-16);
    }

    .home-hero__title {
        font-size: 3.5rem;
    }

    .home-hero__title-line {
        display: block;
        white-space: nowrap;
    }

    .home-page #site-types {
        padding-block-start: var(--space-16);
    }

    .home-builder__workspace {
        min-height: 22rem;
    }

    .home-builder__assistant {
        padding: var(--space-5);
    }

    .home-step,
    .home-site-types .feature-card,
    .home-package {
        padding: var(--space-8);
    }
}

/* 1600px ----------------------------------------------------------------- */

@media (min-width: 100rem) {
    .home-page {
        --home-content-max-width: 82.5rem;
    }

    .home-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 47rem);
    }

    .home-hero__title {
        font-size: 4rem;
    }
}

/* 1920px ----------------------------------------------------------------- */

@media (min-width: 120rem) {
    .home-page {
        --home-content-max-width: 90rem;
    }

    .home-section {
        padding-block: 7.5rem;
    }

    .home-hero__inner {
        min-height: 44rem;
        padding-block-start: var(--space-20);
        padding-block-end: var(--space-16);
    }

    .home-hero__title {
        font-size: 4.5rem;
    }

    .home-builder {
        max-width: 47rem;
        justify-self: end;
    }

    .home-page #site-types {
        padding-block-start: var(--space-20);
    }
}

@keyframes home-builder-progress {
    from {
        opacity: 0.18;
        transform: scaleX(0.24);
    }

    to {
        opacity: 0.38;
        transform: scaleX(0.82);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-builder__bar::after {
        animation: none;
        opacity: 0.26;
        transform: scaleX(0.68);
    }

    .home-panel-tabs__tab,
    .home-page .button,
    .home-page .feature-card,
    .home-page .package-card,
    .home-page .faq-accordion__indicator {
        transition: none;
    }
}

@media (forced-colors: active) {
    .home-builder,
    .home-step,
    .home-core-preview,
    .home-panel,
    .home-infrastructure__preview,
    .home-why li,
    .home-panel-tabs__list {
        border: 1px solid CanvasText;
    }

    .home-panel-tabs__tab[aria-selected="true"],
    .home-panel-tabs__tab.is-active {
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }

    .home-builder__live i,
    .home-hero__proof li::before,
    .home-panel__status i,
    .home-panel__list li > span {
        forced-color-adjust: none;
    }
}