/* Views/Home/Index.cshtml: architectural frames and glass panels. */
.home-page.window-home {
    --frame: #173b43;
    --ink: #12383f;
    --accent: #00796f;
    --line: #d6e2df;
    color: var(--ink);
    background: #f6f7f3;
    overflow: clip;
    font-family: "Segoe UI", Arial, sans-serif;
}

.window-home .go-wrap {
    width: calc(100% - 96px);
    max-width: 1320px;
}

.window-home .go-hero {
    padding: 80px 0 64px;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    background: radial-gradient(ellipse at 85% 25%, #d8ebe5, transparent 58%), #edf2ec;
    overflow: visible;
}

.window-home .go-hero::before {
    inset: 0;
    opacity: .38;
    background-image: linear-gradient(#c6d9d1 1px, transparent 1px), linear-gradient(90deg, #c6d9d1 1px, transparent 1px);
    background-size: 90px 90px;
    transform: none;
    mask-image: linear-gradient(90deg, transparent 30%, #000);
}

.window-home .go-hero::after {
    display: none;
}

.window-home .hero-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
}

.window-home .hero-brand {
    display: block;
}

.window-home .brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.window-home .hero-splash {
    width: 42px;
    height: 48px;
    object-fit: contain;
}

.window-home .logo-title {
    margin: 0;
    font: 750 31px/1 "Segoe UI", Arial, sans-serif;
    letter-spacing: -.055em;
    transform: none;
}

.window-home .logo-title .glass {
    color: var(--ink);
}

.window-home .logo-title .ops {
    color: var(--accent);
}

.window-home .hero-copy {
    max-width: 600px;
    color: #456368;
    font-size: 18px;
    line-height: 1.7;
}

.window-home .hero-copy strong {
    display: block;
    margin-bottom: 26px;
    color: var(--ink);
    font-size: clamp(40px, 4.7vw, 70px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.window-home .hero-copy p {
    max-width: 500px;
    margin: 0;
}

.window-home .free-demo-wrap {
    justify-content: flex-start;
    margin-top: 30px;
}

.window-home .free-demo-button {
    gap: 24px;
    padding: 18px 24px;
    border-radius: 2px;
    background: var(--frame);
    color: #fff;
    font-size: 12px;
    letter-spacing: .07em;
    box-shadow: none;
}

.window-home .free-demo-button::after {
    content: "↗";
    font-size: 22px;
    line-height: 1;
}

.window-home .free-demo-button:hover {
    background: var(--accent);
    box-shadow: 0 8px 20px #173b4320;
}

/* A dimensional casement window, drawn in CSS rather than a stock image. */
.window-home .window-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.08;
    padding: 32px 24px 36px;
    perspective: 1200px;
}

.window-home .window-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #90aea4;
    background: linear-gradient(90deg, transparent 49.8%, #90aea4 50%, transparent 50.2%);
}

.window-home .window-scene::after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 8px;
    right: -12px;
    height: 12px;
    background: #becfc7;
    transform: skewX(-42deg);
    box-shadow: 0 16px 22px #163f3925;
}

.window-home .window-assembly {
    position: relative;
    width: 100%;
    height: 100%;
    border: 12px solid var(--frame);
    background: linear-gradient(150deg, #eef9eb 2%, #c1e4dd 40%, #8bbab3 75%, #448c83);
    box-shadow: 16px 20px 0 #1f51441a, 28px 34px 36px #23473d22, inset 0 0 0 3px #5f7c78;
    transform: rotateY(-12deg) rotateX(3deg);
    transform-style: preserve-3d;
}

.window-home .window-assembly::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 65% 92%, #759e73 0 20%, transparent 20.5%), radial-gradient(ellipse at 0 110%, #356a60 0 40%, transparent 40.5%), linear-gradient(130deg, transparent 30%, #ffffff90 30.2% 31%, transparent 31.2% 37%, #ffffff60 37.2% 39%, transparent 39.2%);
}

.window-home .window-transom {
    position: absolute;
    inset: 0 0 71%;
    border: 5px solid #31534f;
    border-bottom: 12px solid var(--frame);
    background: linear-gradient(135deg, #ffffff85, #cce9e122);
    box-shadow: inset 0 0 0 2px #9bbab1;
}

.window-home .window-fixed,
.window-home .window-casement {
    position: absolute;
    top: 29%;
    bottom: 0;
    width: 50%;
    border: 7px solid var(--frame);
    background: linear-gradient(125deg, #ffffff45, #d7f3ed33 45%, #217c7520);
    box-shadow: inset 0 0 0 2px #7b9d91;
}

.window-home .window-fixed {
    left: 0;
    border-right-width: 6px;
}

.window-home .window-casement {
    right: 0;
    transform-origin: right center;
    transform: rotateY(-28deg);
    background: linear-gradient(120deg, #ffffffbb, #d4eeea77 45%, #a7d7cb44);
    box-shadow: -10px 10px 18px #193e3920, inset 0 0 0 2px #9db9ae;
    transition: transform 700ms ease;
}

.window-home .window-scene:hover .window-casement {
    transform: rotateY(-43deg);
}

.window-home .window-handle {
    position: absolute;
    top: 47%;
    left: 9px;
    width: 5px;
    height: 36px;
    border-radius: 3px;
    background: #d8e6df;
    box-shadow: 2px 2px 2px #0c272c66;
}

.window-home .window-sill {
    position: absolute;
    left: -22px;
    right: -22px;
    bottom: -22px;
    height: 13px;
    background: #244a48;
    box-shadow: 0 5px 0 #113432;
}

.window-home .proof-strip {
    padding: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.window-home .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.window-home .hero-proof span {
    position: relative;
    padding: 24px 24px 24px 34px;
    border-right: 1px solid var(--line);
    color: #3f5d61;
    font-size: 13px;
    font-weight: 600;
}

.window-home .hero-proof span:nth-child(3n) {
    border-right: 0;
}

.window-home .hero-proof span:nth-child(-n+3) {
    border-bottom: 1px solid var(--line);
}

.window-home .hero-proof span::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 2px solid var(--accent);
    border-radius: 0;
    background: transparent;
    transform: translateY(-50%);
}

.window-home .feature-section {
    padding: 100px 0;
    border-bottom: 1px solid var(--line);
}

.window-home .feature-grid,
.window-home .feature-grid.reverse {
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.window-home .section-number {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--accent);
    font: 500 13px/1.2 Consolas, monospace;
    letter-spacing: .14em;
}

.window-home .section-number::after {
    content: "";
    display: inline-block;
    width: 64px;
    height: 1px;
    margin: 0 0 4px 16px;
    background: currentColor;
    opacity: .45;
}

.window-home .copy h2 {
    max-width: 520px;
    margin-bottom: 24px;
    color: var(--ink);
    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 600;
    line-height: 1.09;
    letter-spacing: -.045em;
}

.window-home .copy > p {
    color: #51696d;
    font-size: 16px;
    line-height: 1.8;
}

.window-home .checks {
    margin-top: 26px;
}

.window-home .checks li {
    padding: 10px 0 10px 23px;
    border-bottom: 1px solid var(--line);
    color: #38565c;
    font-size: 14px;
    line-height: 1.55;
}

.window-home .checks li::before {
    content: "";
    top: 18px;
    left: 0;
    width: 7px;
    height: 7px;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Screenshots sit inside square aluminium-style frames. */
.window-home .backoffice-screenshot {
    position: relative;
    margin: 24px 0;
    padding: 38px 12px 12px;
    border: 8px solid var(--frame);
    border-radius: 1px;
    background: #d8e7e1;
    box-shadow: 18px 18px 0 #dce6df, 0 25px 50px #213c3615;
    transform: none;
}

.window-home .backoffice-screenshot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    border-bottom: 6px solid var(--frame);
    background: linear-gradient(110deg, #ffffffa8, #8dbeb5);
}

.window-home .backoffice-screenshot img {
    border-radius: 0;
}

.window-home .screenshot-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.window-home .field-section {
    background: #173b43;
    --line: #ffffff22;
}

.window-home .field-section .copy h2 {
    color: #f1f6ed;
}

.window-home .field-section .copy > p,
.window-home .field-section .checks li {
    color: #c1d6d5;
}

.window-home .field-section .section-number {
    color: #a3d2bc;
}

.window-home .field-section .checks li::before {
    border-color: #9ecbb8;
}

.window-home .phone-gallery-block {
    position: relative;
    padding: 30px 24px 22px;
    border: 1px solid #a3bcb1;
    background: #e1eae2;
    box-shadow: 14px 14px 0 #173b430a;
}

.window-home .field-section .phone-gallery-block {
    border-color: #567b7b;
    background: #244b51;
    box-shadow: 14px 14px 0 #0b262c55;
}

.window-home .phones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    margin: 0 0 18px;
}

.window-home .phone-link,
.window-home .phone-link:nth-child(n) {
    min-width: 0;
    margin: 0;
    transition: transform 200ms ease;
}

.window-home .phone-link:hover {
    transform: translateY(-7px);
}

.window-home .phone,
.window-home .phone:nth-child(n) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px;
    border: 1px solid #608078;
    border-radius: 12px;
    background: #14373c;
    box-shadow: 0 8px 14px #0c272c26;
    transform: none;
}

.window-home .phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.window-home .play-store-subtle a {
    opacity: 1;
}

.window-home .play-store-subtle img {
    width: 136px;
}

.window-home .customer-section {
    background: #ecf1e9;
}

.window-home .closing {
    padding: 64px 0;
    background: #edf2ec;
}

.window-home .closing-box {
    position: relative;
    padding: 64px 40px;
    border: 10px solid var(--frame);
    border-radius: 0;
    background: linear-gradient(125deg, #1d4b50, #173b43);
    box-shadow: inset 0 0 0 2px #577d77, 12px 12px 0 #cbdad0;
    text-align: center;
    overflow: hidden;
}

.window-home .closing-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 55%, #ffffff05 55% 69%, transparent 69%);
    pointer-events: none;
}

.window-home .closing-box h3 {
    color: #f2f6ef;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    letter-spacing: -.03em;
}

.window-home .contact-line {
    margin-top: 22px;
    padding-top: 24px;
    border-color: #ffffff25;
}

.window-home .contact-line a {
    color: #bde8d2;
    font-size: 18px;
}

.window-home a:focus-visible,
.window-home button:focus-visible {
    outline: 3px solid #008f83;
    outline-offset: 5px;
}

@media (min-width: 1100px) {
    .window-home .customer-section .phones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        max-width: 330px;
        margin: 0 auto 20px;
    }
}

@media (max-width: 1099px) {
    .window-home .hero-grid {
        gap: 32px;
    }

    .window-home .feature-grid,
    .window-home .feature-grid.reverse {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .window-home .feature-grid.reverse .copy {
        grid-row: 1;
    }

    .window-home .copy h2,
    .window-home .hero-copy {
        max-width: 720px;
    }

    .window-home .phone-gallery-block,
    .window-home .backoffice-screenshot {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .window-home .go-wrap {
        width: calc(100% - 40px);
    }

    .window-home .go-hero {
        padding: 36px 0 38px;
    }

    .window-home .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .window-home .brand-lockup {
        margin-bottom: 26px;
    }

    .window-home .hero-copy strong {
        font-size: clamp(38px, 9.5vw, 60px);
    }

    .window-home .hero-copy {
        font-size: 16px;
    }

    .window-home .window-scene {
        max-width: 420px;
        margin: auto;
        aspect-ratio: 1.1;
    }

    .window-home .hero-proof {
        grid-template-columns: 1fr 1fr;
    }

    .window-home .hero-proof span {
        padding: 20px 12px 20px 26px;
        font-size: 12px;
        border: 0;
        border-bottom: 1px solid var(--line);
    }

    .window-home .hero-proof span:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .window-home .hero-proof span:nth-child(n+5) {
        border-bottom: 0;
    }

    .window-home .hero-proof span::before {
        left: 6px;
    }

    .window-home .feature-section {
        padding: 56px 0;
    }

    .window-home .copy h2 {
        font-size: 36px;
    }

    .window-home .phone-gallery-block {
        padding: 22px 18px;
        box-shadow: 6px 6px 0 #173b4312;
    }

    .window-home .phones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .window-home .backoffice-screenshot {
        border-width: 6px;
        padding: 34px 6px 6px;
        box-shadow: 8px 8px 0 #dce6df;
    }

    .window-home .closing {
        padding: 38px 0;
    }

    .window-home .closing-box {
        padding: 36px 16px;
        border-width: 6px;
        box-shadow: 6px 6px 0 #cbdad0;
    }

    .window-home .contact-line a {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .window-home *,
    .window-home *::before,
    .window-home *::after {
        transition: none !important;
        animation: none !important;
    }
}