:root {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body.public-site {
    background: var(--tblr-body-bg);
    color: var(--tblr-body-color);
    font-family: Inter, "Noto Sans Devanagari", "Noto Sans Bengali", sans-serif;
    overflow-x: clip;
}

.public-skip-link {
    left: 1rem;
    position: fixed;
    top: 1rem;
    z-index: 1100;
}

.public-header {
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--tblr-body-bg) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--tblr-border-color) 72%, transparent);
}

.public-header .navbar {
    min-height: 4.75rem;
}

.public-brand {
    color: var(--tblr-body-color);
    margin: 0;
    padding: 0;
}

.public-nav-links {
    gap: .25rem;
}

.public-nav-links .nav-link {
    color: var(--tblr-secondary-color);
    font-weight: 600;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link:focus-visible {
    color: var(--tblr-body-color);
}

.public-nav-actions {
    align-items: center;
    display: flex;
    gap: .35rem;
}

.public-nav-actions .dropdown-toggle {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.section-shell {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.public-hero {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--tblr-primary) 6%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--tblr-primary) 6%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    min-height: calc(100vh - 4.75rem);
    position: relative;
}

.public-hero::before {
    background: linear-gradient(90deg, var(--tblr-body-bg), transparent 48%, var(--tblr-body-bg));
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.public-hero-grid {
    align-items: center;
    display: grid;
    gap: clamp(3rem, 7vw, 7rem);
    grid-template-columns: minmax(0, 1fr) minmax(27rem, .9fr);
    position: relative;
}

.section-kicker {
    color: var(--tblr-primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.public-hero h1 {
    font-size: clamp(2.6rem, 5.7vw, 5.25rem);
    letter-spacing: -.055em;
    line-height: .98;
    margin: 0;
    max-width: 12ch;
}

.public-hero-lead {
    color: var(--tblr-secondary-color);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.7;
    margin: 1.75rem 0 0;
    max-width: 39rem;
}

.public-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.public-text-link {
    color: var(--tblr-body-color);
    font-weight: 700;
    padding: .75rem;
    text-decoration: none;
}

.public-hero-note {
    border-left: 2px solid var(--tblr-primary);
    color: var(--tblr-secondary-color);
    font-size: .875rem;
    margin-top: 2rem;
    max-width: 34rem;
    padding-left: 1rem;
}

.plan-transformation {
    min-height: 34rem;
    position: relative;
}

.plan-grid {
    background-image:
        linear-gradient(color-mix(in srgb, var(--tblr-primary) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--tblr-primary) 12%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    inset: 1rem 0 0 2rem;
    mask-image: linear-gradient(135deg, #000, transparent 82%);
    position: absolute;
}

.plan-stage {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .08);
    height: 15rem;
    padding: 1rem;
    position: absolute;
    width: 16rem;
}

.plan-stage-number {
    color: var(--tblr-primary);
    font-size: .7rem;
    font-weight: 800;
}

.plan-stage-label {
    float: right;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-stage-source { left: 0; top: 0; transform: rotate(-4deg); }
.plan-stage-2d { right: 0; top: 8rem; transform: rotate(3deg); z-index: 2; }
.plan-stage-3d { bottom: 0; left: 5.5rem; transform: rotate(-1deg); z-index: 3; }

.blueprint-demo,
.floorplan-demo,
.model-demo {
    inset: 3.25rem 1rem 1rem;
    position: absolute;
}

.blueprint-demo {
    background-image:
        linear-gradient(#3b82f6 1px, transparent 1px),
        linear-gradient(90deg, #3b82f6 1px, transparent 1px);
    background-size: 13px 13px;
    border: 2px solid #3b82f6;
    opacity: .72;
}

.blueprint-demo i,
.floorplan-demo i {
    border: 2px solid currentColor;
    display: block;
    position: absolute;
}

.blueprint-demo i:nth-child(1), .floorplan-demo i:nth-child(1) { inset: 12% 48% 48% 8%; }
.blueprint-demo i:nth-child(2), .floorplan-demo i:nth-child(2) { inset: 12% 8% 58% 52%; }
.blueprint-demo i:nth-child(3), .floorplan-demo i:nth-child(3) { inset: 56% 54% 8% 8%; }
.blueprint-demo i:nth-child(4), .floorplan-demo i:nth-child(4) { inset: 46% 8% 8% 50%; }
.blueprint-demo i:nth-child(5) { border-radius: 50%; height: 18px; inset: auto 20% 18% auto; width: 18px; }

.floorplan-demo {
    border: 3px solid var(--tblr-body-color);
    color: var(--tblr-body-color);
}

.floorplan-demo i { border-width: 1px; }

.model-demo {
    perspective: 400px;
    transform: rotateX(58deg) rotateZ(-30deg);
}

.model-demo i {
    background: color-mix(in srgb, var(--tblr-primary) 16%, var(--tblr-bg-surface));
    border: 2px solid var(--tblr-primary);
    display: block;
    height: 5rem;
    position: absolute;
    width: 7rem;
}

.model-demo i:nth-child(1) { left: 0; top: 0; }
.model-demo i:nth-child(2) { right: 0; top: 1.5rem; }
.model-demo i:nth-child(3) { bottom: 0; left: 3.5rem; }

.plan-flow {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.plan-flow span {
    border-top: 2px dashed color-mix(in srgb, var(--tblr-primary) 55%, transparent);
    position: absolute;
    width: 5rem;
}

.plan-flow span:first-child { left: 42%; top: 25%; transform: rotate(30deg); }
.plan-flow span:last-child { bottom: 28%; right: 28%; transform: rotate(125deg); }

.public-section {
    border-top: 1px solid color-mix(in srgb, var(--tblr-border-color) 65%, transparent);
}

.public-section-contrast,
.public-about {
    background: color-mix(in srgb, var(--tblr-bg-surface-secondary) 72%, var(--tblr-body-bg));
}

.section-heading {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    max-width: 46rem;
}

.section-heading h2,
.benefits-intro h2,
.public-about h2,
.public-cta h2 {
    font-size: clamp(2rem, 4vw, 3.75rem);
    letter-spacing: -.04em;
    line-height: 1.05;
    margin: 0;
}

.section-heading > p:last-child,
.benefits-intro > p,
.public-about-copy,
.public-cta p,
.contact-layout .section-heading p {
    color: var(--tblr-secondary-color);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-top: 1.25rem;
}

.section-heading-split {
    align-items: end;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr);
    max-width: none;
}

.section-heading-split > p {
    margin-bottom: .35rem;
}

.service-list {
    border-top: 1px solid var(--tblr-border-color);
}

.service-item {
    align-items: start;
    border-bottom: 1px solid var(--tblr-border-color);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr);
    padding: 2rem 0;
}

.service-index {
    color: var(--tblr-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    padding-top: .35rem;
}

.service-icon {
    align-items: center;
    background: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
    color: var(--tblr-primary);
    display: flex;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}

.service-item h3,
.process-step h3,
.portfolio-caption h3,
.benefits-list h3,
.contact-panel h3 {
    font-size: 1.2rem;
    margin: 0;
}

.service-item p,
.process-step p,
.portfolio-caption p,
.benefits-list p,
.contact-panel p {
    color: var(--tblr-secondary-color);
    line-height: 1.7;
    margin: .55rem 0 0;
}

.process-track {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.process-step {
    border-left: 1px solid var(--tblr-border-color);
    min-height: 15rem;
    padding: 1.5rem;
    position: relative;
}

.process-step:last-child { border-right: 1px solid var(--tblr-border-color); }

.process-number {
    color: var(--tblr-primary);
    display: block;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -.05em;
    margin-bottom: 3.5rem;
}

.showcase-sequence {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.showcase-panel {
    min-width: 0;
}

.showcase-label {
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: .08em;
    margin-bottom: .75rem;
    text-transform: uppercase;
}

.showcase-label span { color: var(--tblr-primary); }

.showcase-visual {
    background: var(--tblr-bg-surface-secondary);
    border: 1px solid var(--tblr-border-color);
    height: clamp(15rem, 25vw, 20rem);
    position: relative;
}

.showcase-panel > p {
    color: var(--tblr-secondary-color);
    line-height: 1.65;
    margin: 1rem 0 0;
}

.showcase-arrow {
    color: var(--tblr-primary);
    font-size: 1.75rem;
}

.showcase-visual i,
.portfolio-preview span {
    display: block;
    position: absolute;
}

.showcase-visual-blueprint {
    background-image: linear-gradient(#60a5fa22 1px, transparent 1px), linear-gradient(90deg, #60a5fa22 1px, transparent 1px);
    background-size: 18px 18px;
}

.showcase-visual-blueprint i { border: 2px solid #60a5fa; }
.showcase-visual-2d i { border: 3px solid var(--tblr-body-color); }
.showcase-visual i:nth-child(1) { inset: 12% 52% 52% 10%; }
.showcase-visual i:nth-child(2) { inset: 12% 10% 58% 52%; }
.showcase-visual i:nth-child(3) { inset: 52% 55% 10% 10%; }
.showcase-visual i:nth-child(4) { inset: 46% 10% 10% 48%; }

.showcase-visual-3d {
    perspective: 700px;
}

.showcase-visual-3d i {
    background: color-mix(in srgb, var(--tblr-primary) 16%, var(--tblr-bg-surface));
    border: 2px solid var(--tblr-primary);
    height: 34%;
    transform: rotateX(58deg) rotateZ(-28deg);
    width: 48%;
}

.showcase-visual-3d i:nth-child(1) { left: 8%; top: 18%; }
.showcase-visual-3d i:nth-child(2) { right: 8%; top: 30%; }
.showcase-visual-3d i:nth-child(3) { bottom: 14%; left: 28%; }

.portfolio-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-item {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
}

.portfolio-preview {
    aspect-ratio: 4 / 3;
    background-color: color-mix(in srgb, var(--tblr-bg-surface-secondary) 82%, var(--tblr-body-bg));
    border-bottom: 1px solid var(--tblr-border-color);
    overflow: hidden;
    position: relative;
}

.portfolio-preview-source {
    background-image: linear-gradient(#3b82f61c 1px, transparent 1px), linear-gradient(90deg, #3b82f61c 1px, transparent 1px);
    background-size: 16px 16px;
}

.portfolio-preview span { border: 2px solid color-mix(in srgb, var(--tblr-primary) 75%, var(--tblr-body-color)); }
.portfolio-preview span:nth-child(1) { inset: 12% 52% 54% 8%; }
.portfolio-preview span:nth-child(2) { inset: 12% 8% 58% 50%; }
.portfolio-preview span:nth-child(3) { inset: 50% 57% 10% 8%; }
.portfolio-preview span:nth-child(4) { inset: 45% 8% 10% 45%; }

.portfolio-preview-three_d { perspective: 600px; }
.portfolio-preview-three_d span { background: color-mix(in srgb, var(--tblr-primary) 14%, var(--tblr-bg-surface)); transform: rotateX(55deg) rotateZ(-28deg); }

.portfolio-caption { padding: 1.5rem; }
.portfolio-demo-label { color: var(--tblr-primary); display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; margin-bottom: .65rem; text-transform: uppercase; }
.portfolio-note { color: var(--tblr-secondary-color); font-size: .85rem; margin: 1.25rem 0 0; }

.benefits-layout {
    display: grid;
    gap: clamp(3rem, 8vw, 8rem);
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.benefits-intro { position: sticky; top: 7rem; align-self: start; }

.benefits-list { border-top: 1px solid var(--tblr-border-color); }
.benefits-list article { align-items: start; border-bottom: 1px solid var(--tblr-border-color); display: grid; gap: 1rem; grid-template-columns: 1rem minmax(0, 1fr); padding: 1.35rem 0; }
.benefit-mark { background: var(--tblr-primary); height: .5rem; margin-top: .45rem; transform: rotate(45deg); width: .5rem; }

.public-about { padding: clamp(4rem, 8vw, 7rem) 0; }
.public-about-grid { display: grid; gap: 2rem; grid-template-columns: .45fr 1fr 1fr; }
.public-about-grid .section-kicker { margin: .5rem 0 0; }
.public-about-copy p:first-child { margin-top: 0; }

.public-cta { background: #0f5bd3; color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.public-cta .section-kicker, .public-cta p { color: rgba(255,255,255,.76); }
.public-cta-inner { align-items: end; display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr) auto; }
.public-cta-inner > div:first-child { max-width: 48rem; }
.public-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.contact-layout { align-items: start; display: grid; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: minmax(0, 1fr) minmax(20rem, .85fr); }
.contact-panel { background: var(--tblr-bg-surface); border-left: 3px solid var(--tblr-primary); box-shadow: 0 1.5rem 4rem rgba(15,23,42,.07); padding: clamp(1.5rem, 4vw, 3rem); }
.contact-label { color: var(--tblr-primary) !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .1em; margin-top: 0 !important; text-transform: uppercase; }
.contact-email { color: var(--tblr-body-color); display: block; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 800; margin: .75rem 0 1.5rem; overflow-wrap: anywhere; }
.contact-panel .btn { margin-top: 1.5rem; }

.public-footer { background: #0b1220; color: #fff; padding: 4rem 0 1.5rem; }
.public-footer .floorstyler-brand-logo { color: #fff; }
.public-footer-top { align-items: start; display: flex; gap: 3rem; justify-content: space-between; }
.public-footer-brand p { color: rgba(255,255,255,.6); line-height: 1.6; margin: 1rem 0 0; max-width: 27rem; }
.public-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: flex-end; }
.public-footer-links a { color: rgba(255,255,255,.72); font-weight: 600; text-decoration: none; }
.public-footer-links a:hover, .public-footer-links a:focus-visible { color: #fff; }
.public-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); display: flex; font-size: .8rem; gap: 1rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.25rem; }

@media (max-width: 991.98px) {
    .public-header .navbar-collapse {
        border-top: 1px solid var(--tblr-border-color);
        margin-top: .85rem;
        padding: 1rem 0;
    }

    .public-nav-actions {
        align-items: stretch;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .public-hero-grid {
        grid-template-columns: 1fr;
    }

    .public-hero-copy {
        max-width: 46rem;
    }

    .plan-transformation {
        margin: 0 auto;
        max-width: 34rem;
        width: 100%;
    }

    .section-heading-split,
    .benefits-layout,
    .public-about-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-step:nth-child(3) { border-top: 1px solid var(--tblr-border-color); }
    .process-step:nth-child(2) { border-right: 1px solid var(--tblr-border-color); }
    .benefits-intro { position: static; }
    .public-cta-inner { align-items: start; grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .section-shell { padding: 4rem 0; }
    .public-header .navbar { min-height: 4.25rem; }
    .public-hero { min-height: auto; }
    .public-hero h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
    .public-hero-actions { align-items: stretch; flex-direction: column; }
    .public-hero-actions .btn { width: 100%; }
    .public-text-link { text-align: center; }
    .plan-transformation { min-height: 29rem; }
    .plan-stage { height: 12rem; width: 13rem; }
    .plan-stage-2d { top: 7rem; }
    .plan-stage-3d { left: 2.25rem; }
    .service-item { gap: 1rem; grid-template-columns: 2rem minmax(0, 1fr); }
    .service-icon { grid-column: 1; grid-row: 2; }
    .service-item > div:last-child { grid-column: 2; grid-row: 1 / span 2; }
    .process-track { grid-template-columns: 1fr; }
    .process-step { border-right: 1px solid var(--tblr-border-color); border-top: 1px solid var(--tblr-border-color); min-height: auto; }
    .process-step:first-child { border-top: 0; }
    .process-number { margin-bottom: 1.5rem; }
    .showcase-sequence { grid-template-columns: 1fr; }
    .showcase-arrow { text-align: center; transform: rotate(90deg); }
    .showcase-visual { height: 17rem; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .public-cta-actions { align-items: stretch; flex-direction: column; }
    .public-footer-top, .public-footer-bottom { align-items: flex-start; flex-direction: column; }
    .public-footer-links { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
}