/*
 * Homepage redesign (v2). Uses the tokens in brand.css.
 * Everything is scoped to .tc-home (page content) or html.tc-home-page (header),
 * so no other page on the site is affected.
 */

/* ============ Header: transparent over the hero, navy once you scroll ============ */
html.tc-home-page .header:not(.fixed-header) {
    position: relative;
    z-index: 20;
    background-color: transparent !important;
}

html.tc-home-page .header.fixed-header {
    z-index: 20;
    background-color: rgba(5, 17, 51, 0.94) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(5, 17, 51, 0.35);
}

html.tc-home-page .header .logo img {
    filter: brightness(0) invert(1); /* white logo on navy, same as logo-h-white */
}

html.tc-home-page .header .nav-menu__link {
    color: #fff;
    font-family: var(--tc-font);
    font-weight: 500;
    padding: 30px 0;
}

html.tc-home-page .header .nav-menu__item:hover > a,
html.tc-home-page .header .nav-menu__item.activePage > a,
html.tc-home-page .header .nav-menu__item.is-current > a {
    color: var(--tc-sky) !important; /* the old theme forces its orange here with !important */
}

html.tc-home-page .header .toggle-mobileMenu {
    color: #fff;
    min-width: 44px;
    min-height: 44px;
}

html.tc-home-page .header .toggle-mobileMenu:focus-visible,
html.tc-home-page .header .nav-menu__link:focus-visible {
    outline: 2px solid var(--tc-sky);
    outline-offset: 4px;
}

/* ============ Page base ============ */
.tc-home {
    font-family: var(--tc-font);
    color: var(--tc-ink);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: hidden;
    overflow-x: clip;
}

.tc-home *,
.tc-home *::before,
.tc-home *::after { box-sizing: border-box; }

.tc-home img { max-width: 100%; height: auto; display: block; }
.tc-home a { text-decoration: none; }
.tc-home h1, .tc-home h2, .tc-home h3, .tc-home h4 { font-family: var(--tc-font); margin: 0; }
.tc-home p { margin: 0; }
.tc-home ul { list-style: none; padding: 0; margin: 0; }

.tc-section { position: relative; padding-block: var(--tc-section); background: #fff; }
.tc-section--tint { background: var(--tc-tint); }
.tc-section--navy { background: var(--tc-navy); color: #fff; }

.tc-title {
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--tc-navy);
    margin: 14px 0 16px !important;
}

.tc-title em { font-style: normal; color: var(--tc-blue); }
.tc-section--navy .tc-title { color: #fff; }
.tc-section--navy .tc-title em { color: var(--tc-sky); }

.tc-lead { color: var(--tc-muted); font-size: 1.05rem; max-width: 62ch; }
.tc-section--navy .tc-lead { color: #c3cde6; }

.tc-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.tc-head--center { margin-inline: auto; text-align: center; }
.tc-head--center .tc-lead { margin-inline: auto; }

.tc-pattern-bg > .tc-container { position: relative; z-index: 2; }

.tc-pattern-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/home/pattern.webp") no-repeat -120px -40px / 420px auto;
    opacity: 0.06;
    pointer-events: none;
}

/* ============ Hero ============ */
.tc-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(720px 520px at 76% 42%, rgba(2, 136, 209, 0.55), rgba(2, 136, 209, 0) 70%),
        linear-gradient(180deg, #0a2a6b 0%, var(--tc-navy) 64%);
    margin-top: calc(var(--tc-header-h, 84px) * -1);
    padding-top: calc(var(--tc-header-h, 84px) + clamp(28px, 5vw, 64px));
    padding-bottom: clamp(72px, 9vw, 120px);
}

.tc-hero::before {
    content: "";
    position: absolute;
    left: -140px;
    top: 30px;
    width: 420px;
    height: 420px;
    background: url("../images/home/pattern.webp") no-repeat center / contain;
    opacity: 0.06;
    pointer-events: none;
}

.tc-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--tc-blue) 0 33%, var(--tc-bright) 33% 66%, var(--tc-sky) 66%);
}

.tc-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

.tc-hero h1 {
    font-size: clamp(2.5rem, 7.4vw, 4.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 18px 0 20px !important;
}

.tc-hero h1 em { display: block; font-style: normal; color: var(--tc-sky); }
.tc-hero__lead { color: #c3cde6; font-size: clamp(1rem, 2.3vw, 1.2rem); max-width: 44ch; }
.tc-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tc-hero__cta .tc-btn { flex: 1 1 100%; }
.tc-hero .tc-btn--primary { box-shadow: 0 0 0 1px rgba(132, 216, 255, 0.55), 0 10px 24px rgba(2, 136, 209, 0.35); }

.tc-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    color: #c3cde6;
    font-size: 0.85rem;
}

.tc-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.tc-hero__trust .tc-star { color: var(--tc-yellow); letter-spacing: 2px; }

.tc-hero__visual { position: relative; margin-inline: -8px; margin-top: -10px; }
.tc-hero__visual img { width: 100%; }

.tc-hero__bars { display: flex; margin-bottom: 20px; }

/* ============ Stats band (overlaps the hero edge) ============ */
.tc-stats { position: relative; z-index: 3; margin-top: -52px; background: linear-gradient(180deg, transparent 0, transparent 52px, #fff 52px); }

.tc-stats__card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 12px;
    background: #fff;
    border-radius: 0 var(--tc-radius) 0 var(--tc-radius);
    box-shadow: var(--tc-shadow-lg);
    padding: 26px 22px;
}

.tc-stat { text-align: center; }
.tc-stat__num { display: block; font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--tc-blue); letter-spacing: -0.02em; }
.tc-stat__label { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 500; color: var(--tc-muted); }
.tc-stat--rating { grid-column: 1 / -1; border-top: 1px solid var(--tc-line); padding-top: 18px; }
.tc-stat--rating .tc-stat__num { color: var(--tc-navy); }
.tc-stat--rating .tc-star { color: var(--tc-yellow); letter-spacing: 3px; font-size: 1rem; display: block; }

/* ============ About ============ */
.tc-about__grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.tc-about__media { position: relative; }
.tc-about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 var(--tc-radius) 0 var(--tc-radius); box-shadow: var(--tc-shadow); }
.tc-about__media .tc-bars { position: absolute; right: 18px; top: -26px; }
.tc-about__badge {
    position: absolute;
    left: 16px;
    bottom: -22px;
    background: var(--tc-navy);
    color: #fff;
    padding: 14px 20px;
    border-radius: 0 16px 0 16px;
    box-shadow: var(--tc-shadow);
}
.tc-about__badge b { display: block; font-size: 1rem; font-weight: 700; }
.tc-about__badge span { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-sky); font-weight: 600; }
.tc-about__text p + p { margin-top: 14px; }
.tc-about__text p { color: var(--tc-muted); }
.tc-about__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ============ Core values ============ */
.tc-values__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tc-value {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0 var(--tc-radius-sm) 0 var(--tc-radius-sm);
    padding: 24px;
}
.tc-value__no { color: var(--tc-sky); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; }
.tc-value h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 8px 0 6px; }
.tc-value p { font-size: 0.92rem; color: #c3cde6; }
.tc-value--promise { background: var(--tc-blue); border-color: var(--tc-blue); display: flex; flex-direction: column; justify-content: center; }
.tc-value--promise h3 { color: var(--tc-sky); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0; }
.tc-value--promise p { color: #fff; font-size: 1.05rem; font-weight: 500; }

/* ============ Services ============ */
.tc-services__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.tc-service {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 var(--tc-radius-sm) 0 var(--tc-radius-sm);
    box-shadow: var(--tc-shadow);
    padding: 28px;
}
.tc-service .tc-bars { position: absolute; right: 22px; top: 24px; --tc-bar-w: 8px; gap: 3px; opacity: 0.9; }
.tc-service__no { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; color: var(--tc-blue); }
.tc-service h3 { font-size: 1.15rem; font-weight: 700; color: var(--tc-navy); margin: 10px 0 10px; padding-right: 52px; }
.tc-service p { color: var(--tc-muted); font-size: 0.95rem; }
.tc-home .tc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tc-service .tc-link { margin-top: auto; padding-top: 14px; }

/* ============ Featured: The Smart Residences ============ */
.tc-feature { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.tc-feature__media { position: relative; }
.tc-feature__media img { width: 100%; border-radius: 0 var(--tc-radius) 0 var(--tc-radius); box-shadow: var(--tc-shadow-lg); background: radial-gradient(520px 340px at 62% 38%, rgba(2, 136, 209, 0.55), rgba(2, 136, 209, 0) 70%), var(--tc-navy); }
.tc-feature__media .tc-chip { position: absolute; left: 16px; top: 16px; }
.tc-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; margin: 24px 0 26px; }
.tc-facts dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc-blue); }
.tc-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--tc-navy); }
.tc-feature__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============ Cards (estates / properties / blog) ============ */
.tc-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.tc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 var(--tc-radius) 0 var(--tc-radius);
    overflow: hidden;
    box-shadow: var(--tc-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tc-card:hover { transform: translateY(-4px); box-shadow: var(--tc-shadow-lg); }
.tc-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tc-tint); }
.tc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tc-card__chips { position: absolute; left: 14px; top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.tc-card__loc { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tc-blue); }
.tc-card h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--tc-navy); }
.tc-card h3 a { color: inherit; }
.tc-card p { font-size: 0.93rem; color: var(--tc-muted); }
.tc-card .tc-link { margin-top: auto; }
.tc-price { font-size: 1.35rem; font-weight: 800; color: var(--tc-navy); letter-spacing: -0.01em; }
.tc-metaline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; color: var(--tc-muted); }
.tc-metaline span { display: inline-flex; align-items: center; gap: 7px; }
.tc-metaline i { color: var(--tc-blue); }

.tc-card--cta {
    justify-content: center;
    padding: 32px 26px;
    background: var(--tc-navy);
    color: #fff;
    min-height: 260px;
}
.tc-card--cta h3 { color: #fff; font-size: 1.4rem; margin: 18px 0 10px; }
.tc-card--cta p { color: #c3cde6; margin-bottom: 20px; }
.tc-card--cta:hover { transform: none; }

.tc-section-cta { display: flex; justify-content: center; margin-top: 36px; }

/* ============ Why Tech City (edge) ============ */
.tc-edge__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.tc-edge {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 0 var(--tc-radius-sm) 0 var(--tc-radius-sm);
    padding: 22px;
}
.tc-edge__icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--tc-navy);
    color: var(--tc-sky);
    border-radius: 0 14px 0 14px;
    font-size: 1.1rem;
}
.tc-edge h3 { font-size: 1.02rem; font-weight: 700; color: var(--tc-navy); margin-bottom: 4px; }
.tc-edge p { font-size: 0.92rem; color: var(--tc-muted); }
.tc-edge .tc-link { min-height: 36px; font-size: 0.9rem; }

/* ============ Academy ============ */
.tc-academy__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.tc-academy__media img { width: 100%; border-radius: 0 var(--tc-radius) 0 var(--tc-radius); box-shadow: var(--tc-shadow-lg); }
.tc-academy__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.tc-academy__stats b { display: block; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; color: var(--tc-sky); line-height: 1.1; }
.tc-academy__stats span { display: block; font-size: 0.8rem; color: #c3cde6; margin-top: 4px; }

/* ============ Testimonials ============ */
.tc-rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; }
.tc-rating b { font-size: 2rem; font-weight: 800; color: var(--tc-navy); line-height: 1; }
.tc-rating .tc-star { color: var(--tc-yellow); letter-spacing: 3px; }
.tc-rating span { color: var(--tc-muted); font-size: 0.9rem; }

.tc-reviews {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--tc-gutter);
    padding: 4px 2px 14px;
    margin-inline: calc(var(--tc-gutter) * -1);
    padding-inline: var(--tc-gutter);
    scrollbar-width: none;
}
.tc-reviews::-webkit-scrollbar { display: none; }
.tc-review {
    flex: 0 0 86%;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--tc-line);
    border-radius: 0 var(--tc-radius-sm) 0 var(--tc-radius-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--tc-shadow);
    text-align: left;
}
.tc-review .tc-star { color: var(--tc-yellow); letter-spacing: 3px; }
.tc-home blockquote, .tc-home figcaption { text-align: left; }
.tc-review blockquote { margin: 0; padding: 0; border: 0; color: var(--tc-ink); font-size: 0.97rem; flex: 1; }
.tc-review__who { display: flex; align-items: center; gap: 12px; }
.tc-review__avatar {
    width: 44px;
    height: 44px;
    border-radius: 0 14px 0 14px;
    display: grid;
    place-items: center;
    background: var(--tc-navy);
    color: var(--tc-sky);
    font-weight: 700;
    font-size: 0.95rem;
}
.tc-review__who b { display: block; font-size: 0.95rem; color: var(--tc-navy); }
.tc-review__role { display: block; font-size: 0.78rem; color: var(--tc-muted); }

/* ============ Closing CTA ============ */
.tc-cta { text-align: center; overflow: hidden; }
.tc-cta::before { background-position: right -160px bottom -160px; background-size: 560px auto; }
.tc-cta__inner { position: relative; z-index: 2; max-width: 980px; margin-inline: auto; }
.tc-cta__inner > .tc-lead { margin-inline: auto; }
.tc-cta .tc-bars { margin-bottom: 18px; }
.tc-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.tc-cta__contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    text-align: left;
}
.tc-cta__contact b { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tc-sky); font-weight: 600; margin-bottom: 4px; }
.tc-cta__contact a, .tc-cta__contact span { color: #fff; font-size: 0.95rem; overflow-wrap: break-word; }
.tc-cta__contact a { display: inline-block; padding-block: 2px; }
.tc-cta__contact a:hover { color: var(--tc-sky); }
.tc-cta__rc { margin-top: 24px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8e9bbd; }

/* ============ Blog ============ */
.tc-blog__date { position: absolute; right: 14px; top: 14px; background: var(--tc-navy); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1.2; text-align: center; padding: 8px 12px; border-radius: 0 12px 0 12px; }

/* ============ Breakpoints ============ */
@media (min-width: 576px) {
    .tc-hero__cta .tc-btn { flex: 0 0 auto; }
    .tc-values__grid { grid-template-columns: repeat(2, 1fr); }
    .tc-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-edge__grid { grid-template-columns: repeat(2, 1fr); }
    .tc-cta__contact { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .tc-stats__card { grid-template-columns: repeat(5, 1fr); gap: 0; padding: 32px 12px; }
    .tc-stat { padding-inline: 12px; border-left: 1px solid var(--tc-line); }
    .tc-stat:first-child { border-left: 0; }
    .tc-stat--rating { grid-column: auto; border-top: 0; padding-top: 0; }

    .tc-services__grid { grid-template-columns: repeat(2, 1fr); }
    .tc-reviews { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
    .tc-review { flex: none; grid-column: span 2; }
    .tc-review:nth-child(n+4) { grid-column: span 3; }
}

@media (min-width: 992px) {
    .tc-hero__grid { grid-template-columns: 1.02fr 1fr; gap: 40px; }
    .tc-hero__visual { margin-inline: 0 -40px; }
    .tc-about__grid { grid-template-columns: 1fr 1fr; gap: 72px; }
    .tc-feature { grid-template-columns: 1fr 1.1fr; gap: 60px; }
    .tc-academy__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
    .tc-values__grid { grid-template-columns: repeat(4, 1fr); }
    .tc-services__grid { grid-template-columns: repeat(3, 1fr); }
    .tc-grid { grid-template-columns: repeat(3, 1fr); }
    .tc-edge__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-card { transition: none; }
    .tc-card:hover { transform: none; }
}

/* ============ Mobile: card grids become swipeable rows (keeps the page short) ============ */
@media (max-width: 767.98px) {
    .tc-home .tc-rail {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--tc-gutter);
        margin-inline: calc(var(--tc-gutter) * -1);
        padding: 6px var(--tc-gutter) 18px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* the peeking next card shows it scrolls */
    }

    .tc-home .tc-rail::-webkit-scrollbar { display: none; }

    .tc-home .tc-rail > * {
        flex: 0 0 82%;
        max-width: 340px;
        scroll-snap-align: start;
    }

    .tc-home .tc-rail:focus-visible { outline: 2px solid var(--tc-bright); outline-offset: -2px; }

    .tc-hero__bars { --tc-bar-w: 13px; margin-bottom: 14px; }
}

/* Back-to-top button in brand blue instead of the old theme orange */
html.tc-home-page .progress-wrap::after { color: var(--tc-blue) !important; }
html.tc-home-page .progress-wrap svg.progress-circle path { stroke: var(--tc-blue); }