:root {
    --bg: #05040a;
    --surface: #0a0812;
    --surface-2: #100c1d;
    --surface-3: #171128;

    --tanzanite: #3156d8;
    --tanzanite-bright: #5f73ff;
    --tanzanite-violet: #6846c9;
    --tanzanite-deep: #17133f;

    --crystal: #dfe5ff;
    --white: #f7f8ff;
    --muted: #9698aa;
    --muted-2: #67697b;

    --line: rgba(126, 137, 255, 0.16);
    --line-bright: rgba(126, 137, 255, 0.32);

    --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);

    --container: 1180px;
    --radius: 24px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 75% 8%, rgba(77, 66, 190, 0.14), transparent 28rem),
        radial-gradient(circle at 15% 42%, rgba(45, 73, 210, 0.08), transparent 25rem),
        var(--bg);
    color: var(--white);
    font-family: "DM Sans", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5, 4, 10, 0.78);
    border-bottom: 1px solid rgba(126, 137, 255, 0.1);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-right: auto;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-bright);
    border-radius: 11px;
    background:
        linear-gradient(145deg, rgba(95, 115, 255, 0.22), rgba(104, 70, 201, 0.08));
    box-shadow:
        inset 0 0 22px rgba(95, 115, 255, 0.08),
        0 8px 25px rgba(0, 0, 0, 0.25);
    color: var(--crystal);
    font: 800 12px "Manrope", sans-serif;
    letter-spacing: 0.04em;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-copy strong {
    font: 800 14px "Manrope", sans-serif;
    letter-spacing: -0.02em;
}

.brand-copy small {
    margin-top: 4px;
    color: var(--muted-2);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 27px;
}

.desktop-nav a {
    position: relative;
    color: #a8a9b9;
    font-size: 13px;
    transition: color 0.25s ease;
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 1px;
    background: var(--tanzanite-bright);
    transition: right 0.25s ease;
}

.desktop-nav a:hover {
    color: var(--white);
}

.desktop-nav a:hover::after {
    right: 0;
}

.header-cta {
    padding: 11px 16px;
    border: 1px solid var(--line-bright);
    border-radius: 12px;
    background: rgba(49, 86, 216, 0.09);
    color: var(--crystal);
    font-size: 12px;
    font-weight: 700;
    transition: 0.25s ease;
}

.header-cta:hover {
    border-color: rgba(126, 137, 255, 0.55);
    background: rgba(49, 86, 216, 0.18);
    transform: translateY(-1px);
}

.header-cta span {
    margin-left: 7px;
}

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 17px;
    height: 1px;
    margin: 5px auto;
    background: var(--white);
}

/* ================================
   HERO
================================ */

.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 82px 0 76px;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -220px;
    top: -230px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(76, 71, 207, 0.16),
        rgba(49, 86, 216, 0.05) 42%,
        transparent 70%
    );
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.75fr);
    align-items: center;
    gap: 70px;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.hero-glow-one {
    width: 260px;
    height: 260px;
    left: -130px;
    bottom: -100px;
    background: rgba(49, 86, 216, 0.12);
}

.hero-glow-two {
    width: 220px;
    height: 220px;
    right: 28%;
    top: 15%;
    background: rgba(104, 70, 201, 0.07);
}

.hero-content {
    max-width: 700px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 23px;
    color: #9ea6d7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7187ff;
    box-shadow: 0 0 13px rgba(113, 135, 255, 0.85);
}

.hero h1 {
    max-width: 760px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(46px, 6vw, 78px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero h1 span,
.heading h2 span,
.brand-copy-block h2 span,
.marketing-copy h2 span,
.experience-copy h2 span,
.why-layout h2 span,
.cta-card h2 span {
    color: transparent;
    background:
        linear-gradient(
            115deg,
            #aebaff 0%,
            #6882ff 35%,
            #7953d2 68%,
            #c6b8ff 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-text {
    max-width: 610px;
    margin-top: 27px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 47px;
    padding: 0 19px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    transition: 0.25s ease;
}

.btn-primary {
    border: 1px solid rgba(145, 157, 255, 0.35);
    background:
        linear-gradient(
            135deg,
            #3859d8,
            #563bb1
        );
    box-shadow:
        0 12px 30px rgba(49, 70, 190, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 17px 35px rgba(49, 70, 190, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-ghost {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.018);
    color: #b7b9ca;
}

.btn-ghost:hover {
    border-color: var(--line-bright);
    color: var(--white);
    background: rgba(95, 115, 255, 0.06);
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.hero-mini-mark {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: #aeb8ff;
    font: 800 10px "Manrope", sans-serif;
}

.hero-trust div {
    display: flex;
    flex-direction: column;
}

.hero-trust strong {
    color: #c5c7d5;
    font-size: 11px;
}

.hero-trust small {
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 9px;
}


/* ================================
   LIVE PANEL
================================ */

.live-panel {
    position: relative;
    padding: 22px;
    border: 1px solid rgba(126, 137, 255, 0.18);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(21, 17, 40, 0.96),
            rgba(8, 7, 15, 0.96)
        );
    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
}

.live-panel::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    top: -130px;
    right: -80px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(91, 102, 239, 0.16),
        transparent 68%
    );
}

.live-panel-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 19px;
    border-bottom: 1px solid var(--line);
}

.live-panel-top div {
    display: flex;
    flex-direction: column;
}

.live-panel-top small {
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.live-panel-top strong {
    margin-top: 6px;
    color: #cfd3e8;
    font: 700 12px "Manrope", sans-serif;
}

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(106, 126, 255, 0.22);
    border-radius: 99px;
    color: #9daeff;
    font-size: 8px;
    font-weight: 800;
}

.online-pill i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #788fff;
    box-shadow: 0 0 10px rgba(120, 143, 255, 0.8);
}

.live-stack {
    display: grid;
    gap: 9px;
    padding: 19px 0;
}

.live-card {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid rgba(126, 137, 255, 0.09);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.018);
}

.live-card.active {
    border-color: rgba(104, 121, 255, 0.25);
    background:
        linear-gradient(
            105deg,
            rgba(64, 83, 210, 0.13),
            rgba(104, 70, 201, 0.035)
        );
}

.live-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(90, 105, 236, 0.08);
    border: 1px solid rgba(116, 130, 255, 0.13);
    color: #98a8ff;
    font-size: 14px;
}

.live-info {
    display: flex;
    flex-direction: column;
}

.live-info span {
    color: var(--muted-2);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.live-info strong {
    margin-top: 3px;
    color: #d5d6e3;
    font-size: 11px;
}

.live-card b {
    color: #7f91ec;
    font-size: 7px;
    letter-spacing: 0.1em;
}

.live-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 17px;
    border-top: 1px solid var(--line);
}

.live-bottom div {
    display: flex;
    flex-direction: column;
}

.live-bottom span {
    color: var(--muted-2);
    font-size: 7px;
    letter-spacing: 0.12em;
}

.live-bottom strong {
    margin-top: 4px;
    color: #c7cadb;
    font-size: 11px;
}

.live-bottom a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #aab4ff;
    transition: 0.25s ease;
}

.live-bottom a:hover {
    border-color: var(--line-bright);
    transform: translate(2px, -2px);
}

/* ================================
   SECTION FOUNDATION
================================ */

.section {
    position: relative;
    padding: 88px 0;
}

.heading {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 38px;
}

.section-label {
    display: inline-block;
    margin-bottom: 15px;
    color: #7f91ec;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.heading h2,
.brand-copy-block h2,
.marketing-copy h2,
.experience-copy h2,
.why-layout h2,
.cta-card h2 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 800;
}

.heading > p {
    max-width: 470px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}


/* ================================
   SERVICES
================================ */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.service-card {
    position: relative;
    min-height: 285px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 17, 40, .9),
            rgba(9, 8, 16, .94)
        );
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(91, 103, 237, .17),
        transparent 68%
    );
    transition: transform .4s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-bright);
}

.service-card:hover::before {
    transform: scale(1.5);
}

.service-number {
    position: absolute;
    top: 23px;
    right: 24px;
    color: #44455a;
    font: 700 9px "Manrope", sans-serif;
}

.service-symbol {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    border: 1px solid rgba(122, 137, 255, .18);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(83, 103, 226, .14),
            rgba(104, 70, 201, .04)
        );
    color: #a9b4ff;
    font-size: 17px;
    box-shadow: inset 0 0 20px rgba(86, 99, 218, .05);
}

.service-card h3 {
    max-width: 230px;
    color: #e2e3ed;
    font: 700 17px/1.25 "Manrope", sans-serif;
    letter-spacing: -.025em;
}

.service-card p {
    max-width: 310px;
    margin-top: 11px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.service-card a {
    position: absolute;
    left: 24px;
    bottom: 22px;
    color: #8999ee;
    font-size: 10px;
    font-weight: 700;
}

.service-card a:hover {
    color: #c4ccff;
}


/* ================================
   INDUSTRIES
================================ */

.industries-section {
    padding-top: 50px;
}

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

.industry-card {
    position: relative;
    min-height: 145px;
    display: grid;
    grid-template-columns: 25px 1fr 20px;
    gap: 9px;
    padding: 18px;
    border: 1px solid rgba(126, 137, 255, .11);
    border-radius: 17px;
    background: rgba(255,255,255,.015);
    transition: .25s ease;
}

.industry-card:hover {
    transform: translateY(-3px);
    border-color: rgba(126, 137, 255, .3);
    background: rgba(67, 81, 190, .055);
}

.industry-card > span {
    color: #4b4d60;
    font-size: 8px;
    font-weight: 700;
}

.industry-card div {
    display: flex;
    flex-direction: column;
}

.industry-card small {
    color: #7788e6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.industry-card strong {
    margin-top: 7px;
    color: #d5d7e4;
    font: 700 14px "Manrope", sans-serif;
}

.industry-card p {
    margin-top: 5px;
    color: #77798b;
    font-size: 9px;
}

.industry-card b {
    align-self: end;
    color: #7888df;
    font-size: 12px;
}

.industry-special {
    border-color: rgba(104, 70, 201, .25);
    background:
        linear-gradient(
            145deg,
            rgba(81, 63, 169, .1),
            rgba(49, 86, 216, .035)
        );
}


/* ================================
   BRAND STUDIO
================================ */

.brand-section {
    padding-top: 70px;
}

.brand-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    align-items: center;
}

.brand-copy-block {
    max-width: 500px;
}

.brand-copy-block > p,
.marketing-copy > p {
    max-width: 470px;
    margin-top: 21px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 27px;
    color: #a7b2ff;
    font-size: 11px;
    font-weight: 700;
}

.text-link span {
    transition: transform .25s ease;
}

.text-link:hover span {
    transform: translate(3px, -2px);
}

.brand-features {
    border-top: 1px solid var(--line);
}

.brand-feature {
    display: grid;
    grid-template-columns: 35px 1fr 30px;
    align-items: center;
    gap: 18px;
    min-height: 104px;
    border-bottom: 1px solid var(--line);
}

.brand-feature > span {
    color: #4d4f62;
    font-size: 9px;
    font-weight: 700;
}

.brand-feature div {
    display: flex;
    flex-direction: column;
}

.brand-feature strong {
    color: #dddfea;
    font: 700 16px "Manrope", sans-serif;
}

.brand-feature p {
    margin-top: 4px;
    color: #77798a;
    font-size: 11px;
}

.brand-feature b {
    color: #8999ef;
    font-size: 16px;
    text-align: right;
}


/* ================================
   MARKETING
================================ */

.marketing-section {
    padding-top: 76px;
}

.marketing-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: center;
}

.marketing-copy {
    max-width: 500px;
}

.campaign-panel {
    position: relative;
    padding: 25px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(19, 15, 35, .95),
            rgba(8, 7, 14, .98)
        );
    box-shadow: var(--shadow);
    overflow: hidden;
}

.campaign-panel::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 180px;
    right: -120px;
    bottom: -130px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(92, 75, 211, .16),
        transparent 68%
    );
    pointer-events: none;
}

.campaign-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.campaign-head div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.campaign-head span {
    color: #898b9d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

.campaign-head strong {
    padding: 4px 7px;
    border: 1px solid rgba(105, 124, 245, .25);
    border-radius: 5px;
    color: #899bf2;
    font-size: 7px;
    letter-spacing: .1em;
}

.campaign-head i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #788cff;
    box-shadow: 0 0 12px rgba(120, 140, 255, .8);
}

.campaign-metrics {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 4px;
}

.metric {
    min-height: 115px;
    padding: 19px 13px;
    border-bottom: 1px solid rgba(126,137,255,.1);
}

.metric:nth-child(odd) {
    border-right: 1px solid rgba(126,137,255,.1);
}

.metric span {
    display: block;
    color: #66687b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}

.metric strong {
    display: block;
    margin-top: 10px;
    color: #dfe2f0;
    font: 700 25px "Manrope", sans-serif;
    letter-spacing: -.04em;
}

.metric small {
    display: block;
    margin-top: 4px;
    color: #77798b;
    font-size: 8px;
}

.campaign-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    gap: 5px;
    height: 55px;
    margin-top: 16px;
}

.campaign-line span {
    flex: 1;
    min-height: 8px;
    border-radius: 3px 3px 0 0;
    background:
        linear-gradient(
            to top,
            rgba(58, 79, 197, .18),
            rgba(116, 128, 255, .7)
        );
}

.campaign-line span:nth-child(1) { height: 30%; }
.campaign-line span:nth-child(2) { height: 46%; }
.campaign-line span:nth-child(3) { height: 35%; }
.campaign-line span:nth-child(4) { height: 62%; }
.campaign-line span:nth-child(5) { height: 51%; }
.campaign-line span:nth-child(6) { height: 75%; }
.campaign-line span:nth-child(7) { height: 66%; }
.campaign-line span:nth-child(8) { height: 91%; }


/* ================================
   TANZANITE EXPERIENCE
================================ */

.experience-section {
    padding-top: 80px;
}

.experience-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 80px;
    align-items: center;
}

.experience-copy {
    max-width: 500px;
}

.experience-copy > p {
    margin-top: 21px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.experience-points {
    display: grid;
    gap: 15px;
    margin-top: 30px;
}

.experience-points > div {
    display: grid;
    grid-template-columns: 25px 1fr;
    column-gap: 10px;
}

.experience-points span {
    grid-row: span 2;
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(111,130,255,.25);
    border-radius: 7px;
    background: rgba(74,92,213,.08);
    color: #94a3ff;
    font-size: 10px;
}

.experience-points strong {
    color: #d7d9e5;
    font-size: 12px;
}

.experience-points p {
    margin-top: 2px;
    color: #707284;
    font-size: 10px;
}


/* ================================
   CLIENT SPACE
================================ */

.client-space {
    padding: 24px;
    border: 1px solid rgba(126,137,255,.19);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(20,16,38,.96),
            rgba(8,7,14,.98)
        );
    box-shadow: var(--shadow);
}

.client-space-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.client-space-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-space-head span {
    color: #8b8d9f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

.client-space-head strong {
    padding: 4px 7px;
    border: 1px solid rgba(110,129,255,.25);
    border-radius: 5px;
    color: #879af1;
    font-size: 7px;
}

.client-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(119,136,255,.22);
    border-radius: 10px;
    background: rgba(79,93,211,.1);
    color: #a5b0ff;
    font: 800 9px "Manrope", sans-serif;
}

.project-overview {
    padding-top: 23px;
}

.project-title {
    display: flex;
    flex-direction: column;
}

.project-title small,
.progress-top span {
    color: #66687a;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
}

.project-title strong {
    margin-top: 6px;
    color: #dce0ed;
    font: 700 17px "Manrope", sans-serif;
}

.project-progress {
    margin-top: 25px;
}

.progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-top strong {
    color: #9cabff;
    font: 700 12px "Manrope", sans-serif;
}

.progress-track {
    height: 5px;
    margin-top: 9px;
    border-radius: 99px;
    background: #19172a;
    overflow: hidden;
}

.progress-track span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #405fd8,
            #7654d0
        );
    box-shadow: 0 0 15px rgba(83,103,225,.25);
}

.project-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-top: 27px;
}

.project-step {
    min-height: 77px;
    padding: 10px;
    border: 1px solid rgba(126,137,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.012);
}

.project-step > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #171625;
    color: #66687b;
    font-size: 8px;
    font-weight: 800;
}

.project-step small {
    display: block;
    margin-top: 8px;
    color: #535568;
    font-size: 6px;
}

.project-step strong {
    display: block;
    margin-top: 3px;
    color: #737589;
    font-size: 7px;
    line-height: 1.25;
}

.project-step.done {
    border-color: rgba(93,111,226,.17);
}

.project-step.done > span {
    background: rgba(65,84,198,.16);
    color: #8d9cf0;
}

.project-step.done strong {
    color: #a1a4b6;
}

.project-step.current {
    border-color: rgba(108,125,255,.3);
    background: rgba(74,87,190,.07);
}

.project-step.current > span {
    background: #334da7;
    color: #e3e7ff;
}

.project-step.current strong {
    color: #b8c0f2;
}

.project-update {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 11px;
    align-items: center;
    margin-top: 20px;
    padding: 13px;
    border: 1px solid rgba(126,137,255,.11);
    border-radius: 13px;
    background: rgba(255,255,255,.014);
}

.update-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(80,95,210,.11);
    color: #9aa8ff;
    font: 800 9px "Manrope", sans-serif;
}

.project-update div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.project-update div:nth-child(2) span {
    color: #646679;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .1em;
}

.project-update div:nth-child(2) strong {
    margin-top: 4px;
    color: #aeb1c1;
    font-size: 9px;
}

.project-update time {
    color: #777b8f;
    font-size: 7px;
}


/* ================================
   WHY
================================ */

.why-section {
    padding-top: 70px;
}

.why-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 90px;
    padding: 45px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.why-content {
    max-width: 560px;
}

.why-lead {
    color: #b8bac9;
    font: 500 20px/1.5 "Manrope", sans-serif;
    letter-spacing: -.025em;
}

.why-statement {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.why-statement span {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255,255,255,.015);
    color: #85889b;
    font-size: 9px;
}


/* ================================
   CTA
================================ */

.cta-section {
    padding: 80px 0 95px;
}

.cta-card {
    position: relative;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    border: 1px solid rgba(126,137,255,.2);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(74,85,205,.17),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #110d22,
            #08070f
        );
    text-align: center;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cta-card::before,
.cta-card::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(119,132,255,.08);
    border-radius: 50%;
    pointer-events: none;
}

.cta-card::before {
    width: 440px;
    height: 440px;
}

.cta-card::after {
    width: 650px;
    height: 650px;
}

.cta-card > *:not(.cta-orbit) {
    position: relative;
    z-index: 2;
}

.cta-card h2 {
    max-width: 700px;
}

.cta-card > p {
    max-width: 570px;
    margin-top: 19px;
    color: #858798;
    font-size: 13px;
    line-height: 1.7;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    margin-top: 27px;
}

.cta-orbit {
    position: absolute;
    border: 1px solid rgba(125,139,255,.09);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 300px;
    height: 300px;
}

.orbit-two {
    width: 520px;
    height: 520px;
}

/* =========================================================
   TANZANITE DIGITAL — 6F-A
   FOOTER + FLOATING CONTACT
   ========================================================= */

.site-footer{
    border-top:1px solid var(--line);
    background:
        radial-gradient(circle at 20% 0%,rgba(49,86,216,.10),transparent 30%),
        #030208;
    padding:72px 0 28px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(3,1fr);
    gap:48px;
    padding-bottom:56px;
}

.footer-brand{
    max-width:390px;
}

.footer-brand .brand-main{
    display:block;
    color:var(--white);
    font-family:"Manrope",sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.03em;
}

.footer-brand .brand-sub{
    display:block;
    margin-top:4px;
    color:var(--tanzanite-bright);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.footer-description{
    margin-top:22px;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    max-width:360px;
}

.footer-column h4{
    margin:0 0 18px;
    color:var(--white);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.footer-links{
    display:grid;
    gap:11px;
}

.footer-links a{
    color:var(--muted);
    font-size:13px;
    transition:color .2s ease,transform .2s ease;
}

.footer-links a:hover{
    color:var(--crystal);
    transform:translateX(3px);
}

.footer-bottom{
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    color:var(--muted-2);
    font-size:11px;
}

.footer-bottom strong{
    color:var(--crystal);
    font-weight:700;
}

.floating-contact{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1000;
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:
        radial-gradient(circle at 30% 25%,#6f82ff 0%,#3156d8 42%,#24145f 100%);
    border:1px solid rgba(255,255,255,.20);
    box-shadow:
        0 12px 35px rgba(49,86,216,.38),
        0 0 0 7px rgba(49,86,216,.08);
    transition:transform .25s ease,box-shadow .25s ease;
}

.floating-contact:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:
        0 18px 42px rgba(49,86,216,.48),
        0 0 0 9px rgba(49,86,216,.10);
}

.floating-contact svg{
    width:27px;
    height:27px;
    display:block;
}

@media(max-width:760px){
    .site-footer{
        padding:55px 0 24px;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:34px 22px;
        padding-bottom:40px;
    }

    .footer-brand{
        grid-column:1/-1;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .floating-contact{
        right:16px;
        bottom:16px;
        width:54px;
        height:54px;
    }
}


/* =========================================================
   TANZANITE DIGITAL — 6F-B
   RESPONSIVE + MOTION
   ========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

.reveal{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal.is-visible{
    opacity:1;
    transform:none;
}

.service-card,
.industry-card,
.brand-feature,
.campaign-panel,
.client-space{
    will-change:transform;
}

.service-card:hover,
.industry-card:hover{
    transform:translateY(-5px);
}

/* ---------- TABLET ---------- */

@media(max-width:1050px){

    .container{
        width:min(100% - 36px,var(--container));
    }

    .site-header{
        padding:15px 0;
    }

    .desktop-nav{
        gap:18px;
    }

    .header-cta{
        padding:10px 14px;
    }

    .hero{
        min-height:auto;
        padding:70px 0 64px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .hero-copy{
        max-width:780px;
    }

    .live-panel{
        max-width:700px;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .industries-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .brand-layout,
    .marketing-layout,
    .experience-layout,
    .why-layout{
        grid-template-columns:1fr;
        gap:42px;
    }

    .campaign-panel,
    .client-space{
        max-width:760px;
    }

    .cta-card{
        padding:56px 42px;
    }
}

/* ---------- MOBILE ---------- */

@media(max-width:760px){

    .container{
        width:min(100% - 28px,var(--container));
    }

    .site-header{
        padding:12px 0;
    }

    .header-inner{
        min-height:48px;
    }

    .brand-mark{
        width:40px;
        height:40px;
        font-size:12px;
    }

    .brand-copy .brand-name{
        font-size:14px;
    }

    .brand-copy .brand-role{
        font-size:8px;
        letter-spacing:.09em;
    }

    .desktop-nav{
        position:absolute;
        left:14px;
        right:14px;
        top:calc(100% + 8px);
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:9px;
        border:1px solid var(--line);
        border-radius:18px;
        background:rgba(8,6,16,.97);
        backdrop-filter:blur(18px);
        box-shadow:var(--shadow);
    }

    .site-header.nav-open .desktop-nav{
        display:flex;
    }

    .desktop-nav a{
        padding:12px 13px;
        border-radius:11px;
    }

    .desktop-nav a:hover{
        background:rgba(95,115,255,.08);
    }

    .header-cta{
        display:none;
    }

    .menu-toggle{
        display:flex;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center;
        border:1px solid var(--line);
        border-radius:12px;
        background:rgba(255,255,255,.025);
        color:var(--white);
        cursor:pointer;
    }

    .hero{
        padding:54px 0 48px;
    }

    .hero-grid{
        gap:34px;
    }

    .hero h1{
        font-size:clamp(38px,11vw,54px);
        line-height:.98;
        letter-spacing:-.055em;
    }

    .hero-text{
        font-size:14px;
        line-height:1.75;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .hero-actions .btn{
        width:100%;
        justify-content:center;
    }

    .hero-trust{
        flex-wrap:wrap;
        gap:9px 14px;
    }

    .live-panel{
        border-radius:20px;
        padding:14px;
    }

    .live-cards{
        gap:8px;
    }

    .live-card{
        padding:13px;
    }

    .live-card-title{
        font-size:12px;
    }

    .live-card-meta{
        font-size:9px;
    }

    .section{
        padding:62px 0;
    }

    .heading{
        margin-bottom:30px;
    }

    .heading h2{
        font-size:clamp(31px,8.5vw,43px);
        line-height:1.02;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .service-card{
        padding:22px;
        border-radius:18px;
    }

    .service-card-title{
        font-size:17px;
    }

    .service-card-text{
        font-size:13px;
        line-height:1.7;
    }

    .industries-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .industry-card{
        min-height:132px;
        padding:18px;
        border-radius:17px;
    }

    .industry-card-title{
        font-size:14px;
    }

    .industry-card-meta{
        font-size:9px;
    }

    .brand-section,
    .marketing-section,
    .experience-section,
    .why-section{
        padding-top:64px;
        padding-bottom:64px;
    }

    .brand-features{
        gap:10px;
    }

    .brand-feature{
        padding:18px;
    }

    .marketing-layout,
    .experience-layout,
    .why-layout{
        gap:30px;
    }

    .campaign-panel{
        padding:20px;
        border-radius:19px;
    }

    .campaign-metrics{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .campaign-metric:last-child{
        grid-column:1/-1;
    }

    .client-space{
        padding:18px;
        border-radius:20px;
    }

    .project-overview{
        padding:17px;
    }

    .project-steps{
        gap:7px;
    }

    .project-step{
        padding:11px 8px;
        font-size:9px;
    }

    .project-update{
        padding:14px;
    }

    .why-statement{
        font-size:clamp(25px,7vw,36px);
        line-height:1.08;
    }

    .cta-section{
        padding:34px 0 70px;
    }

    .cta-card{
        padding:45px 24px;
        border-radius:24px;
    }

    .cta-card h2{
        font-size:clamp(34px,10vw,48px);
    }

    .cta-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .cta-actions .btn{
        width:100%;
        justify-content:center;
    }

    .cta-orbit{
        opacity:.55;
    }
}

/* ---------- SMALL PHONES ---------- */

@media(max-width:390px){

    .container{
        width:min(100% - 22px,var(--container));
    }

    .brand-copy .brand-role{
        display:none;
    }

    .hero{
        padding-top:44px;
    }

    .hero h1{
        font-size:36px;
    }

    .industries-grid{
        grid-template-columns:1fr;
    }

    .campaign-metrics{
        grid-template-columns:1fr;
    }

    .campaign-metric:last-child{
        grid-column:auto;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-brand{
        grid-column:auto;
    }
}


/* TANZANITE — SOFT PREMIUM TONE */
:root{
    --tanzanite:#2948b8;
    --tanzanite-bright:#5264d8;
    --tanzanite-violet:#5739aa;
    --tanzanite-deep:#131035;
    --crystal:#c9cff2;
}


/* ===== LIVE CLOCK ===== */

.hero-datetime{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin:18px 0 24px;
}

.hero-clock{
    font-size:30px;
    font-weight:800;
    letter-spacing:2px;
    color:#6fa8ff;
}

.hero-date-wrap{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hero-date{
    color:#e8ecff;
    font-size:14px;
    font-weight:700;
}

.hero-day{
    color:#7aa7ff;
    font-size:13px;
    font-weight:700;
}

.hero-day-note{
    color:#aeb7c5;
    font-size:12px;
    font-weight:600;
}

@media(max-width:760px){

    .hero-datetime{
        gap:12px;
        margin:14px 0 18px;
    }

    .hero-clock{
        font-size:24px;
    }
}


/* LIVE CALENDAR — PREMIUM HERO POSITION */

.hero-datetime{
    margin:0 0 22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
}

.hero-clock{
    font-size:30px;
    line-height:1;
    letter-spacing:2px;
}

.hero-date-wrap{
    gap:3px;
}

.hero-day{
    display:none;
}

.hero-day-note{
    font-size:12px;
    line-height:1.5;
}

@media(max-width:760px){
    .hero-datetime{
        margin-bottom:18px;
    }

    .hero-clock{
        font-size:25px;
    }
}


/* =========================================
   TANZANITE DIGITAL — PREMIUM FINAL POLISH
   ========================================= */

/* Softer Tanzanite brand treatment */
.brand-mark {
    border-color: rgba(126, 137, 255, 0.32);
    background:
        linear-gradient(
            145deg,
            rgba(95, 115, 255, 0.12),
            rgba(104, 70, 201, 0.045)
        );
    box-shadow:
        inset 0 0 18px rgba(95, 115, 255, 0.045),
        0 7px 20px rgba(0, 0, 0, 0.20);
}

.brand-copy strong {
    font-size: 13px;
    letter-spacing: 0.015em;
}

/* Three-line premium menu icon */
.menu-toggle {
    border-color: rgba(126, 137, 255, 0.18);
}

.menu-toggle span {
    width: 17px;
    height: 1.5px;
    margin: 4px auto;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 2px;
}

/* Premium compact live clock */
.hero-datetime {
    margin-top: -4px;
    margin-bottom: 20px;
    gap: 3px;
}

.hero-clock {
    font-size: 26px;
    line-height: 1;
    letter-spacing: 1.7px;
    color: rgba(126, 151, 232, 0.88);
    text-shadow: 0 0 18px rgba(95, 115, 255, 0.10);
}

.hero-date {
    color: rgba(232, 236, 255, 0.82);
    font-size: 13px;
    font-weight: 650;
}

.hero-day-note {
    color: rgba(174, 183, 197, 0.72);
    font-size: 11px;
}

/* Real WhatsApp green */
.floating-contact {
    background: #25D366;
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow:
        0 12px 32px rgba(37, 211, 102, 0.25),
        0 0 0 6px rgba(37, 211, 102, 0.055);
}

.floating-contact:hover {
    box-shadow:
        0 17px 38px rgba(37, 211, 102, 0.32),
        0 0 0 8px rgba(37, 211, 102, 0.07);
}

.floating-contact svg {
    color: #fff;
    fill: #fff;
}

@media(max-width:760px) {
    .brand-copy strong {
        font-size: 12px;
    }

    .hero-datetime {
        margin-top: -5px;
        margin-bottom: 17px;
    }

    .hero-clock {
        font-size: 23px;
        letter-spacing: 1.5px;
    }

    .hero-date {
        font-size: 12px;
    }
}


/* ===== MENU + CLOCK FINAL FIX ===== */

.menu-toggle span {
    width: 18px;
    height: 2px;
    margin: 3px auto;
    background: #ffffff;
    border-radius: 999px;
    opacity: 0.92;
}

/* Lift clock slightly without changing hero layout */
.hero-datetime {
    transform: translateY(-7px);
}

@media(max-width:760px) {
    .hero-datetime {
        transform: translateY(-6px);
    }
}


/* Clock — lift a little more */
.hero-datetime {
    transform: translateY(-11px);
}

@media(max-width:760px) {
    .hero-datetime {
        transform: translateY(-10px);
    }
}


/* ===== HAMBURGER ICON — FORCE 3 LINES ===== */
.menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.menu-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    opacity: 0.95;
    transform: none !important;
}


/* ===== FINAL HAMBURGER — CLEAN 3 BARS ===== */

.menu-toggle {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow: hidden;
}

.menu-toggle span {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 19px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 99px !important;
    opacity: 0.92 !important;
    visibility: visible !important;
}


/* ===== PREMIUM DATETIME BOX ===== */

.hero-datetime {
    width: min(100%, 330px);
    box-sizing: border-box;
    padding: 12px 18px 13px;
    margin-top: -11px;
    margin-bottom: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;

    border: 1px solid rgba(126, 137, 255, 0.14);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(20, 22, 42, 0.72),
            rgba(10, 11, 23, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 28px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero-clock {
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: 1.6px;
}

.hero-date-wrap {
    gap: 2px;
}

.hero-date {
    font-size: 12.5px;
}

.hero-day-note {
    font-size: 10.5px;
    line-height: 1.4;
}

@media(max-width:760px) {

    .hero-datetime {
        width: min(100%, 300px);
        padding: 10px 15px 11px;
        margin-top: -10px;
        margin-bottom: 17px;
        border-radius: 13px;
    }

    .hero-clock {
        font-size: 22px;
    }

    .hero-date {
        font-size: 12px;
    }

    .hero-day-note {
        font-size: 10px;
    }
}


/* =========================================================
   TANZANITE DIGITAL — PREMIUM HERO WORK SLIDER
   ========================================================= */

.work-slider {
    position: relative;
    width: 100%;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.work-slider-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.work-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(185,190,255,.72);
    text-transform: uppercase;
}

.work-counter {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.48);
}

.work-counter #workCurrent {
    color: rgba(255,255,255,.92);
    font-weight: 700;
}

.work-counter i {
    font-style: normal;
    opacity: .35;
}

.work-slides {
    position: relative;
    flex: 1;
    min-height: 390px;
}

.work-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
    gap: 34px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px);
    transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.22,.61,.36,1),
        visibility .65s;
}

.work-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.work-copy {
    position: relative;
    z-index: 3;
    max-width: 570px;
}

.work-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(178,184,255,.66);
}

.work-kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(126,137,255,.55);
}

.work-copy h1 {
    margin: 0;
    max-width: 560px;
    font-size: clamp(35px, 4vw, 58px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 650;
    color: #f7f7fb;
}

.work-copy h1 span {
    display: inline;
    color: #9da7ff;
}

.work-copy p {
    max-width: 500px;
    margin: 19px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(226,228,240,.62);
}

.work-image {
    position: relative;
    min-height: 350px;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background-color: #10111b;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow:
        0 24px 65px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.05);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.work-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(8,9,18,.12) 0%,
            rgba(8,9,18,0) 48%,
            rgba(8,9,18,.28) 100%);
    pointer-events: none;
}

.work-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(7,8,16,.03) 0%,
            rgba(7,8,16,.08) 52%,
            rgba(7,8,16,.55) 100%);
    pointer-events: none;
}

.work-image > span {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 4;
    font-size: 10px;
    letter-spacing: .16em;
    color: rgba(255,255,255,.66);
}

/* Real-photo / project-preview placeholders.
   Images are assigned in the next step. */
.work-image-one {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-two {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-three {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-four {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-five {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-six {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-seven {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-eight {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-nine {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-image-ten {
    background-image:
        linear-gradient(135deg, rgba(20,24,48,.18), rgba(5,6,12,.28));
}

.work-slide.is-active .work-image {
    animation: workImageZoom 5.8s ease-out both;
}

@keyframes workImageZoom {
    from {
        transform: scale(1.035);
    }
    to {
        transform: scale(1);
    }
}

.work-slider-bottom {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 17px;
}

.work-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.work-dots button {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    cursor: pointer;
    transition:
        width .3s ease,
        background .3s ease,
        transform .3s ease;
}

.work-dots button.is-active {
    width: 22px;
    border-radius: 99px;
    background: rgba(157,167,255,.78);
}

.work-dots button:hover {
    transform: scale(1.35);
    background: rgba(255,255,255,.55);
}

.work-progress {
    position: relative;
    height: 1px;
    flex: 1;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}

.work-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: rgba(157,167,255,.65);
}

/* Desktop spacing */
@media (min-width: 761px) {
    .work-slider {
        margin-top: 2px;
    }

    .work-slider-bottom {
        padding-right: 3px;
    }
}

/* Mobile */
@media (max-width: 760px) {

    .work-slider {
        min-height: 600px;
    }

    .work-slider-head {
        margin-bottom: 12px;
    }

    .work-slides {
        min-height: 530px;
    }

    .work-slide {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        transform: translateX(18px);
    }

    .work-slide.is-active {
        transform: translateX(0);
    }

    .work-copy {
        max-width: none;
    }

    .work-kicker {
        margin-bottom: 11px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .work-copy h1 {
        max-width: none;
        font-size: clamp(31px, 9vw, 43px);
        line-height: 1;
    }

    .work-copy p {
        margin-top: 14px;
        font-size: 12.5px;
        line-height: 1.6;
    }

    .work-image {
        width: 100%;
        min-height: 245px;
        height: 245px;
        border-radius: 16px;
    }

    .work-slider-bottom {
        margin-top: 10px;
        gap: 12px;
    }

    .work-dots {
        gap: 5px;
    }

    .work-dots button {
        width: 4px;
        height: 4px;
    }

    .work-dots button.is-active {
        width: 18px;
    }
}



/* REAL WORK VISUALS — ECOMMERCE + LOGISTICS */
.work-image-three {
    background-image: url("https://docs.pixelstrap.net/django/riho/assets/images/layout-images/barc.jpg");
}

.work-image-seven {
    background-image: url("https://beta.wolftrakglobal.com/images/slide9.png");
}

/* =========================================================
   TANZANITE DIGITAL — WORK SLIDER REAL IMAGES
   ========================================================= */

.work-image-one {
    background-image: url('../images/work/01-digital.jpg');
}

.work-image-two {
    background-image: url('../images/work/02-website.png');
}

.work-image-four {
    background-image: url('../images/work/04-school.png');
}

.work-image-five {
    background-image: url('../images/work/05-hotel.webp');
}

.work-image-six {
    background-image: url('../images/work/06-mobile.jpg');
}

.work-image-eight {
    background-image: url('../images/work/08-tracking.png');
}

.work-image-nine {
    background-image: url('../images/work/09-branding.jpg');
}

.work-image-ten {
    background-image: url('../images/work/10-custom.webp') !important;
}


/* =========================================================
   TANZANITE DIGITAL — FINAL REAL WORK IMAGES
   ========================================================= */

.work-image-one {
    background-image: url('../images/work/01-digital.jpg') !important;
}

.work-image-two {
    background-image: url('../images/work/02-website.png') !important;
}

.work-image-four {
    background-image: url('../images/work/04-school.png') !important;
}

.work-image-five {
    background-image: url('../images/work/05-hotel.webp') !important;
}

.work-image-six {
    background-image: url('../images/work/06-mobile.jpg') !important;
}

.work-image-eight {
    background-image: url('../images/work/08-tracking.png') !important;
}

.work-image-nine {
    background-image: url('../images/work/09-branding.jpg') !important;
}

.work-image-ten {
    background-image: url('../images/work/10-custom.webp') !important;
}

.work-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   TANZANITE DIGITAL — FIXED PROJECT CTA
   Stays in place while hero slides change
   ========================================================= */

.work-project-cta {
    position: absolute;
    right: 3.5%;
    bottom: 74px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.work-project-line {
    width: 58px;
    height: 1px;
    display: block;
    background: rgba(255,255,255,.28);
}

.work-project-link {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: rgba(255,255,255,.86);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}

.work-project-link i {
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    opacity: .72;
}

.work-project-link:hover {
    opacity: .72;
    transform: translateX(2px);
}

@media (max-width: 760px) {
    .work-project-cta {
        right: 22px;
        bottom: 66px;
        gap: 9px;
    }

    .work-project-line {
        width: 34px;
    }

    .work-project-link {
        font-size: 9px;
        letter-spacing: .13em;
    }
}


/* =========================================================
   PROJECT CTA — CENTERED ACTIVE BUTTON
   ========================================================= */

.work-project-cta {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 72px;
    transform: translateX(-50%);
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    pointer-events: none;
}

.work-project-line {
    width: 48px;
    height: 1px;
    background: rgba(255,255,255,.45);
    display: block;
}

.work-project-link {
    pointer-events: auto;

    min-width: 168px;
    height: 42px;
    padding: 0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;

    background: rgba(10,10,10,.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: #fff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.04);

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.work-project-link span {
    display: inline-block;
}

.work-project-link i {
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    opacity: .9;
    transition: transform .22s ease;
}

/* ACTIVE / HOVER STATE */
.work-project-link:hover,
.work-project-link:focus-visible {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.72);
    box-shadow:
        0 10px 30px rgba(0,0,0,.38),
        0 0 18px rgba(255,255,255,.08);

    transform: translateY(-2px);
}

.work-project-link:hover i,
.work-project-link:focus-visible i {
    transform: translate(3px,-3px);
}

/* subtle active pulse */
.work-project-link::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.08);
    opacity: .7;
    pointer-events: none;
}

/* MOBILE */
@media (max-width: 760px) {

    .work-project-cta {
        left: 50%;
        bottom: 64px;
        transform: translateX(-50%);
        gap: 9px;
    }

    .work-project-line {
        width: 28px;
    }

    .work-project-link {
        min-width: 154px;
        height: 40px;
        padding: 0 16px;
        font-size: 10px;
        letter-spacing: .14em;
    }

    .work-project-link i {
        font-size: 15px;
    }
}


/* =========================================================
   TANZANITE DIGITAL — UNIVERSAL RESPONSIVE SYSTEM
   Mobile • iOS • Android • Tablet • Laptop • Desktop • TV
   ========================================================= */

/* ---------- GLOBAL RESPONSIVE FOUNDATION ---------- */

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
}

img,
svg,
video,
canvas{
    max-width:100%;
}

img{
    height:auto;
}

button,
a,
input,
select,
textarea{
    -webkit-tap-highlight-color:transparent;
}

button,
input,
select,
textarea{
    font:inherit;
}

button,
a{
    touch-action:manipulation;
}

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

/* Prevent long business names / emails / references
   from breaking layouts on small screens. */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
strong,
small,
label{
    overflow-wrap:anywhere;
}

/* ---------- FLUID CONTAINER ---------- */

.site-container,
.container,
.section-inner,
.hero-inner,
.footer-inner,
.header-inner{
    width:min(100% - 40px, 1240px);
    margin-left:auto;
    margin-right:auto;
}

/* ---------- LARGE DESKTOP ---------- */

@media (min-width:1440px){

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:min(100% - 64px, 1360px);
    }
}

/* ---------- TABLETS / SMALL LAPTOPS ---------- */

@media (max-width:1100px){

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:min(100% - 40px, 960px);
    }

    h1{
        font-size:clamp(42px,7vw,76px);
    }

    h2{
        font-size:clamp(30px,5vw,52px);
    }

    .desktop-nav{
        gap:20px;
    }
}

/* ---------- TABLET ---------- */

@media (max-width:820px){

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:min(100% - 32px, 720px);
    }

    .desktop-nav{
        gap:14px;
    }

    .desktop-nav a{
        font-size:12px;
    }

    section{
        scroll-margin-top:90px;
    }

    .grid,
    .cards-grid,
    .services-grid,
    .industries-grid,
    .work-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* ---------- MOBILE ---------- */

@media (max-width:650px){

    html{
        font-size:16px;
    }

    body{
        min-width:320px;
    }

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:calc(100% - 32px);
        max-width:none;
    }

    /* Header */

    .site-header{
        width:100%;
    }

    .site-header .header-inner{
        width:calc(100% - 28px);
    }

    .desktop-nav{
        display:none;
    }

    .menu-toggle{
        min-width:44px;
        min-height:44px;
        display:grid;
        place-items:center;
    }

    /* Hero */

    .hero,
    .hero-section{
        width:100%;
        overflow:hidden;
    }

    .hero h1{
        max-width:100%;
        font-size:clamp(40px,12vw,60px);
        line-height:.94;
        letter-spacing:-.055em;
    }

    .hero p{
        max-width:100%;
        font-size:15px;
        line-height:1.65;
    }

    /* General grids */

    .grid,
    .cards-grid,
    .services-grid,
    .industries-grid,
    .work-grid{
        grid-template-columns:1fr;
    }

    /* Buttons */

    .button,
    .btn,
    .cta,
    .hero-actions a,
    .hero-actions button{
        min-height:48px;
    }

    /* Forms */

    input,
    select,
    textarea{
        max-width:100%;
    }

    /* Tables / wide content */

    table{
        max-width:100%;
    }

    /* Footer */

    .footer-grid,
    .footer-columns{
        grid-template-columns:1fr;
    }
}

/* ---------- VERY SMALL PHONES ---------- */

@media (max-width:380px){

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:calc(100% - 24px);
    }

    .hero h1{
        font-size:clamp(36px,12vw,48px);
    }

    .menu-toggle{
        min-width:42px;
        min-height:42px;
    }
}

/* ---------- LANDSCAPE PHONES ---------- */

@media (max-width:900px) and (orientation:landscape){

    .hero{
        min-height:auto;
    }

    .hero h1{
        font-size:clamp(36px,7vw,60px);
    }
}

/* =========================================================
   LARGE DISPLAYS / ANDROID TV / TV BROWSERS
   ========================================================= */

@media (min-width:1600px){

    body{
        font-size:17px;
    }

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:min(calc(100% - 96px),1500px);
    }

    .hero h1{
        font-size:clamp(70px,6vw,110px);
    }

    .hero p{
        font-size:18px;
        max-width:720px;
    }

    .desktop-nav a{
        font-size:14px;
    }
}

/* ---------- 4K / VERY LARGE TV ---------- */

@media (min-width:2200px){

    body{
        font-size:19px;
    }

    .site-container,
    .container,
    .section-inner,
    .hero-inner,
    .footer-inner,
    .header-inner{
        width:min(calc(100% - 140px),1750px);
    }

    .hero h1{
        font-size:clamp(86px,6vw,128px);
    }

    .hero p{
        font-size:20px;
        line-height:1.7;
    }

    .desktop-nav a{
        font-size:16px;
    }

    .menu-toggle{
        min-width:52px;
        min-height:52px;
    }
}

/* ---------- REDUCE MOTION FOR ACCESSIBILITY ---------- */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ---------- SAFE AREA FOR MODERN PHONES ---------- */

@supports (padding:max(0px)){

    .site-header{
        padding-left:max(0px,env(safe-area-inset-left));
        padding-right:max(0px,env(safe-area-inset-right));
    }

    body{
        padding-bottom:max(0px,env(safe-area-inset-bottom));
    }
}

/* ---------- TOUCH DEVICES ---------- */

@media (hover:none) and (pointer:coarse){

    a,
    button,
    .menu-toggle,
    input,
    select,
    textarea{
        touch-action:manipulation;
    }

    .button,
    .btn,
    button{
        min-height:46px;
    }
}

/* ---------- TV / REMOTE FRIENDLY ---------- */

@media (min-width:1000px) and (hover:none) and (pointer:coarse){

    a,
    button,
    .menu-toggle,
    select{
        min-height:48px;
    }

    a:focus-visible,
    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    textarea:focus-visible{
        outline:2px solid rgba(43,119,112,.9);
        outline-offset:4px;
    }
}


/* =========================================================
   TANZANITE DIGITAL — HOMEPAGE HERO PREMIUM POLISH
   ========================================================= */

.hero{
    position:relative;
    isolation:isolate;
    min-height:clamp(650px, calc(100vh - 76px), 900px);
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 72% 46%, rgba(76,71,207,.075), transparent 30%),
        radial-gradient(circle at 18% 75%, rgba(255,255,255,.025), transparent 28%),
        #070808;
}

.hero-grid{
    position:relative;
    z-index:2;
    width:100%;
    padding-top:42px;
    padding-bottom:58px;
}

.hero-content{
    position:relative;
    width:100%;
}

/* subtle atmospheric depth */
.hero-glow{
    pointer-events:none;
    position:absolute;
    border-radius:999px;
    filter:blur(70px);
    opacity:.5;
}

.hero-glow-one{
    width:380px;
    height:380px;
    right:-100px;
    top:18%;
    background:rgba(76,71,207,.08);
}

.hero-glow-two{
    width:280px;
    height:280px;
    left:-140px;
    bottom:-100px;
    background:rgba(255,255,255,.035);
}

/* clock / date intelligence strip */
.hero-datetime{
    display:flex;
    align-items:center;
    gap:18px;
    width:max-content;
    margin-bottom:30px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:11px;
    background:rgba(10,11,11,.72);
    box-shadow:
        0 12px 35px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(14px);
}

.hero-clock{
    font-family:"DM Sans",sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    color:rgba(255,255,255,.78);
    font-variant-numeric:tabular-nums;
}

.hero-date-wrap{
    display:flex;
    align-items:center;
    gap:9px;
    padding-left:17px;
    border-left:1px solid rgba(255,255,255,.09);
}

.hero-date,
.hero-day{
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.48);
}

.hero-day-note{
    display:none;
}

/* slider */
.work-slider{
    position:relative;
    width:100%;
}

.work-slider-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

.work-category{
    font-size:10px;
    font-weight:700;
    letter-spacing:.19em;
    color:rgba(255,255,255,.42);
}

.work-counter{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    color:rgba(255,255,255,.38);
}

.work-counter span:first-child{
    color:rgba(255,255,255,.78);
}

.work-counter i{
    font-style:normal;
    opacity:.35;
}

/* slide content */
.work-slide{
    min-height:clamp(470px, 62vh, 650px);
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(330px,.98fr);
    gap:clamp(38px,6vw,92px);
    align-items:center;
}

.work-copy{
    position:relative;
    z-index:3;
    max-width:690px;
}

.work-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1.4;
    color:rgba(255,255,255,.43);
}

.work-kicker::before{
    content:"";
    width:22px;
    height:1px;
    background:rgba(104,70,201,.72);
}

.work-copy h1{
    max-width:760px;
    margin:0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(42px,5.4vw,78px);
    font-weight:800;
    line-height:.99;
    letter-spacing:-.058em;
    color:#f3f3f1;
    text-wrap:balance;
}

.work-copy h1 span{
    color:#8d8fff;
}

.work-copy p{
    max-width:590px;
    margin:27px 0 0;
    font-size:clamp(14px,1.25vw,17px);
    line-height:1.75;
    color:rgba(255,255,255,.49);
}

/* image frame */
.work-image{
    position:relative;
    min-height:clamp(400px,57vh,610px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background-color:#101212;
    box-shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,255,255,.015) inset;
    transform:translateZ(0);
}

.work-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.48) 100%),
        linear-gradient(90deg,rgba(0,0,0,.08),transparent 45%,rgba(76,71,207,.055));
    pointer-events:none;
}

.work-image-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(135deg,rgba(255,255,255,.055),transparent 28%),
        radial-gradient(circle at 72% 24%,rgba(104,70,201,.13),transparent 34%);
    mix-blend-mode:screen;
}

.work-image > span{
    position:absolute;
    z-index:4;
    right:18px;
    bottom:16px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    color:rgba(255,255,255,.52);
}

/* active slide */
.work-slide.is-active .work-copy{
    animation:tdHeroCopyIn .7s ease both;
}

.work-slide.is-active .work-image{
    animation:tdHeroImageIn .85s ease both;
}

@keyframes tdHeroCopyIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes tdHeroImageIn{
    from{
        opacity:0;
        transform:translateX(14px) scale(.985);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* desktop-wide */
@media (min-width:1450px){
    .hero-grid{
        max-width:1480px;
    }

    .work-copy h1{
        font-size:clamp(64px,4.6vw,88px);
    }

    .work-slide{
        gap:100px;
    }

    .work-image{
        min-height:600px;
    }
}

/* tablet */
@media (max-width:1000px){
    .hero{
        min-height:auto;
    }

    .hero-grid{
        padding-top:34px;
        padding-bottom:45px;
    }

    .work-slide{
        grid-template-columns:1fr;
        gap:30px;
        min-height:auto;
    }

    .work-copy{
        max-width:760px;
    }

    .work-copy h1{
        font-size:clamp(42px,7vw,65px);
    }

    .work-image{
        min-height:420px;
    }
}

/* phones */
@media (max-width:650px){
    .hero-grid{
        padding-top:25px;
        padding-bottom:32px;
    }

    .hero-datetime{
        gap:12px;
        margin-bottom:23px;
        padding:8px 11px;
    }

    .hero-date-wrap{
        gap:7px;
        padding-left:12px;
    }

    .hero-date,
    .hero-day{
        font-size:9px;
    }

    .work-slider-head{
        margin-bottom:14px;
    }

    .work-category{
        font-size:9px;
        letter-spacing:.14em;
    }

    .work-counter{
        font-size:10px;
    }

    .work-slide{
        gap:24px;
    }

    .work-kicker{
        margin-bottom:15px;
        font-size:9px;
        letter-spacing:.14em;
    }

    .work-copy h1{
        font-size:clamp(36px,11vw,53px);
        line-height:1.01;
        letter-spacing:-.052em;
    }

    .work-copy p{
        margin-top:20px;
        font-size:14px;
        line-height:1.68;
    }

    .work-image{
        min-height:320px;
        border-radius:16px;
    }
}

/* very small phones */
@media (max-width:380px){
    .hero-datetime{
        width:100%;
        justify-content:flex-start;
    }

    .hero-date-wrap{
        min-width:0;
    }

    .hero-date,
    .hero-day{
        font-size:8px;
    }

    .work-copy h1{
        font-size:34px;
    }

    .work-image{
        min-height:285px;
    }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
    .work-slide.is-active .work-copy,
    .work-slide.is-active .work-image{
        animation:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — SERVICES PREMIUM POLISH
   ========================================================= */

#services{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg,#080909 0%,#090a0a 100%);
}

#services::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    top:10%;
    right:-260px;
    border-radius:50%;
    background:rgba(43,119,112,.045);
    filter:blur(90px);
    pointer-events:none;
}

#services .section-head{
    position:relative;
    z-index:1;
}

#services .services-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:42px;
}

#services .service-card{
    position:relative;
    min-height:265px;
    display:flex;
    flex-direction:column;
    padding:27px 27px 24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:17px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.006)),
        #0c0e0e;
    box-shadow:
        0 18px 50px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

#services .service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:27px;
    width:42px;
    height:1px;
    background:rgba(43,119,112,.72);
    opacity:.75;
}

#services .service-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-100px;
    bottom:-110px;
    border-radius:50%;
    background:rgba(43,119,112,.055);
    filter:blur(20px);
    transition:transform .35s ease;
    pointer-events:none;
}

#services .service-card:hover{
    transform:translateY(-4px);
    border-color:rgba(43,119,112,.34);
    background:
        linear-gradient(145deg,rgba(43,119,112,.045),rgba(255,255,255,.008)),
        #0d1010;
    box-shadow:
        0 25px 65px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.035);
}

#services .service-card:hover::after{
    transform:translate(-20px,-18px);
}

#services .service-number{
    position:absolute;
    top:22px;
    right:24px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    color:rgba(255,255,255,.24);
}

#services .service-symbol{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    margin-bottom:30px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    color:rgba(255,255,255,.68);
    font-size:17px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease;
}

#services .service-card:hover .service-symbol{
    color:#75a29d;
    border-color:rgba(43,119,112,.38);
    background:rgba(43,119,112,.08);
}

#services .service-card h3{
    position:relative;
    z-index:1;
    margin:0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(21px,2vw,27px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.035em;
    color:#eeeeec;
}

#services .service-card p{
    position:relative;
    z-index:1;
    max-width:510px;
    margin:12px 0 0;
    font-size:13px;
    line-height:1.72;
    color:rgba(255,255,255,.45);
}

#services .service-card > a{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    margin-top:auto;
    padding-top:25px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.48);
    text-decoration:none;
    transition:
        color .22s ease,
        gap .22s ease;
}

#services .service-card > a:hover{
    gap:12px;
    color:#78a49f;
}

/* desktop layout refinement */
@media (min-width:1100px){
    #services .services-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;
    }

    #services .service-card{
        min-height:285px;
    }
}

/* large desktop */
@media (min-width:1600px){
    #services .services-grid{
        gap:18px;
        margin-top:48px;
    }

    #services .service-card{
        min-height:305px;
        padding:31px 31px 27px;
    }

    #services .service-card::before{
        left:31px;
    }

    #services .service-number{
        top:25px;
        right:27px;
    }
}

/* tablet */
@media (max-width:820px){
    #services .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-top:32px;
    }

    #services .service-card{
        min-height:250px;
        padding:23px 22px 21px;
    }

    #services .service-card::before{
        left:22px;
    }

    #services .service-symbol{
        margin-bottom:24px;
    }
}

/* phones */
@media (max-width:650px){
    #services .services-grid{
        grid-template-columns:1fr;
        gap:11px;
        margin-top:27px;
    }

    #services .service-card{
        min-height:220px;
        padding:22px 20px 20px;
        border-radius:15px;
    }

    #services .service-card::before{
        left:20px;
    }

    #services .service-number{
        top:19px;
        right:19px;
    }

    #services .service-symbol{
        width:39px;
        height:39px;
        margin-bottom:22px;
        border-radius:10px;
        font-size:15px;
    }

    #services .service-card h3{
        font-size:22px;
    }

    #services .service-card p{
        font-size:13px;
        line-height:1.65;
    }

    #services .service-card > a{
        padding-top:21px;
    }
}

/* touch devices — keep interaction clean */
@media (hover:none){
    #services .service-card:hover{
        transform:none;
    }

    #services .service-card:active{
        transform:scale(.992);
    }
}

/* accessibility */
@media (prefers-reduced-motion:reduce){
    #services .service-card,
    #services .service-symbol,
    #services .service-card > a,
    #services .service-card::after{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — INDUSTRIES PREMIUM POLISH
   ========================================================= */

.industries-section{
    position:relative;
    overflow:hidden;
    background:#080909;
}

.industries-section::before{
    content:"";
    position:absolute;
    left:-220px;
    top:18%;
    width:460px;
    height:460px;
    border-radius:50%;
    background:rgba(43,119,112,.035);
    filter:blur(100px);
    pointer-events:none;
}

.industries-section .container{
    position:relative;
    z-index:1;
}

.industries-section .section-head{
    align-items:end;
}

.industries-section .section-head > p{
    max-width:430px;
    color:rgba(255,255,255,.43);
    line-height:1.7;
}

.industries-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-top:42px;
}

.industry-card{
    position:relative;
    min-height:185px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:15px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),
        #0c0e0e;
    text-decoration:none;
    box-shadow:
        0 15px 42px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.022);
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.industry-card::before{
    content:"";
    position:absolute;
    top:0;
    left:20px;
    width:28px;
    height:1px;
    background:rgba(43,119,112,.72);
}

.industry-card::after{
    content:"";
    position:absolute;
    right:-75px;
    bottom:-85px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(43,119,112,.055);
    filter:blur(24px);
    transition:transform .3s ease;
}

.industry-card:hover{
    transform:translateY(-3px);
    border-color:rgba(43,119,112,.30);
    background:
        linear-gradient(145deg,rgba(43,119,112,.038),rgba(255,255,255,.006)),
        #0d1010;
    box-shadow:
        0 22px 55px rgba(0,0,0,.23),
        inset 0 1px 0 rgba(255,255,255,.028);
}

.industry-card:hover::after{
    transform:translate(-15px,-15px);
}

.industry-card > span{
    position:relative;
    z-index:2;
    align-self:flex-end;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    color:rgba(255,255,255,.23);
}

.industry-card > div{
    position:relative;
    z-index:2;
    padding-top:12px;
}

.industry-card small{
    display:block;
    margin-bottom:9px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
    color:#5d8d87;
}

.industry-card strong{
    display:block;
    font-family:"Manrope",sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.025em;
    color:#ededeb;
}

.industry-card p{
    margin:7px 0 0;
    font-size:10px;
    line-height:1.5;
    color:rgba(255,255,255,.36);
}

.industry-card > b{
    position:absolute;
    z-index:3;
    right:18px;
    bottom:17px;
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,.28);
    transition:
        color .22s ease,
        transform .22s ease;
}

.industry-card:hover > b{
    color:#76a29d;
    transform:translate(2px,-2px);
}

/* special final card */
.industry-card.industry-special{
    border-color:rgba(43,119,112,.16);
    background:
        linear-gradient(145deg,rgba(43,119,112,.065),rgba(255,255,255,.006)),
        #0b0e0e;
}

.industry-card.industry-special small{
    color:#79a59f;
}

.industry-card.industry-special strong{
    color:#f1f2ef;
}

/* wide desktop */
@media (min-width:1450px){
    .industries-grid{
        gap:13px;
        margin-top:48px;
    }

    .industry-card{
        min-height:205px;
        padding:23px;
    }

    .industry-card::before{
        left:23px;
    }

    .industry-card strong{
        font-size:20px;
    }
}

/* tablet */
@media (max-width:1000px){
    .industries-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-top:34px;
    }

    .industry-card{
        min-height:175px;
    }
}

/* phones */
@media (max-width:650px){
    .industries-section .section-head{
        display:block;
    }

    .industries-section .section-head > p{
        margin-top:15px;
    }

    .industries-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin-top:27px;
    }

    .industry-card{
        min-height:175px;
        padding:17px;
        border-radius:13px;
    }

    .industry-card::before{
        left:17px;
    }

    .industry-card strong{
        font-size:16px;
    }

    .industry-card p{
        font-size:9px;
        line-height:1.45;
    }

    .industry-card > b{
        right:14px;
        bottom:13px;
    }
}

/* very small phones */
@media (max-width:390px){
    .industries-grid{
        gap:8px;
    }

    .industry-card{
        min-height:165px;
        padding:15px;
    }

    .industry-card::before{
        left:15px;
    }

    .industry-card strong{
        font-size:15px;
    }

    .industry-card small{
        margin-bottom:7px;
    }
}

/* touch */
@media (hover:none){
    .industry-card:hover{
        transform:none;
    }

    .industry-card:active{
        transform:scale(.992);
    }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
    .industry-card,
    .industry-card > b,
    .industry-card::after{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — BRAND & LOGO STUDIO POLISH
   ========================================================= */

.brand-section{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg,#090a0a 0%,#080909 100%);
}

.brand-section::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-280px;
    top:8%;
    border-radius:50%;
    background:rgba(43,119,112,.04);
    filter:blur(100px);
    pointer-events:none;
}

.brand-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:clamp(55px,8vw,120px);
    align-items:center;
}

.brand-copy-block{
    max-width:650px;
}

.brand-copy-block h2{
    margin:15px 0 0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(40px,5vw,68px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.055em;
    color:#eeeeec;
}

.brand-copy-block h2 span{
    color:#608f89;
}

.brand-copy-block > p{
    max-width:560px;
    margin:24px 0 0;
    font-size:15px;
    line-height:1.75;
    color:rgba(255,255,255,.44);
}

.brand-copy-block .text-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:28px;
    color:rgba(255,255,255,.66);
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    text-decoration:none;
    transition:color .22s ease,gap .22s ease;
}

.brand-copy-block .text-link:hover{
    gap:13px;
    color:#76a29d;
}

.brand-features{
    position:relative;
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(255,255,255,.075);
}

.brand-feature{
    position:relative;
    display:grid;
    grid-template-columns:35px minmax(0,1fr) 28px;
    align-items:center;
    gap:18px;
    min-height:112px;
    padding:18px 3px;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.brand-feature::before{
    content:"";
    position:absolute;
    left:-3px;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(43,119,112,.0);
    transition:background .22s ease;
}

.brand-feature:hover::before{
    background:rgba(43,119,112,.65);
}

.brand-feature > span{
    align-self:start;
    padding-top:3px;
    font-size:9px;
    font-weight:700;
    letter-spacing:.14em;
    color:rgba(255,255,255,.25);
}

.brand-feature strong{
    display:block;
    font-family:"Manrope",sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.025em;
    color:#ececea;
}

.brand-feature p{
    margin:7px 0 0;
    font-size:11px;
    line-height:1.55;
    color:rgba(255,255,255,.38);
}

.brand-feature > b{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:8px;
    font-size:12px;
    font-weight:500;
    color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.018);
    transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.brand-feature:hover > b{
    color:#78a49f;
    border-color:rgba(43,119,112,.35);
    background:rgba(43,119,112,.065);
}

/* wide desktop */
@media (min-width:1450px){
    .brand-layout{
        gap:120px;
    }

    .brand-copy-block h2{
        font-size:72px;
    }

    .brand-feature{
        min-height:125px;
    }
}

/* tablet */
@media (max-width:900px){
    .brand-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .brand-copy-block{
        max-width:760px;
    }

    .brand-copy-block h2{
        font-size:clamp(40px,7vw,60px);
    }
}

/* phones */
@media (max-width:650px){
    .brand-layout{
        gap:35px;
    }

    .brand-copy-block h2{
        font-size:clamp(36px,10vw,48px);
    }

    .brand-copy-block > p{
        margin-top:18px;
        font-size:14px;
        line-height:1.68;
    }

    .brand-copy-block .text-link{
        margin-top:23px;
    }

    .brand-feature{
        grid-template-columns:29px minmax(0,1fr) 26px;
        gap:12px;
        min-height:101px;
    }

    .brand-feature strong{
        font-size:16px;
    }

    .brand-feature p{
        font-size:10px;
    }

    .brand-feature > b{
        width:26px;
        height:26px;
    }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
    .brand-feature,
    .brand-feature > b,
    .brand-copy-block .text-link{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — MARKETING & ADVERTISING POLISH
   ========================================================= */

.marketing-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 82% 48%, rgba(43,119,112,.055), transparent 34%),
        linear-gradient(180deg,#080909 0%,#070808 100%);
}

.marketing-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
    gap:clamp(55px,8vw,125px);
    align-items:center;
}

.marketing-copy{
    max-width:590px;
}

.marketing-copy h2{
    margin:15px 0 0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(42px,5.1vw,70px);
    font-weight:800;
    line-height:.99;
    letter-spacing:-.055em;
    color:#eeeeec;
}

.marketing-copy h2 span{
    display:block;
    color:#608f89;
}

.marketing-copy > p{
    max-width:520px;
    margin:25px 0 0;
    font-size:15px;
    line-height:1.75;
    color:rgba(255,255,255,.43);
}

.marketing-copy .text-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:28px;
    color:rgba(255,255,255,.66);
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    text-decoration:none;
    transition:
        color .22s ease,
        gap .22s ease;
}

.marketing-copy .text-link:hover{
    gap:13px;
    color:#76a29d;
}

/* campaign panel */

.campaign-panel{
    position:relative;
    min-width:0;
    padding:25px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(22,23,23,.96),rgba(10,11,11,.96));
    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.campaign-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:28px;
    right:28px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(43,119,112,.48),
        transparent
    );
}

.campaign-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.campaign-head > div{
    display:flex;
    align-items:center;
    gap:12px;
}

.campaign-head span{
    font-size:9px;
    font-weight:700;
    letter-spacing:.16em;
    color:rgba(255,255,255,.34);
}

.campaign-head strong{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
    color:#76a29d;
}

.campaign-head strong::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#5b8d87;
    box-shadow:0 0 0 3px rgba(43,119,112,.10);
}

.campaign-head i{
    width:31px;
    height:31px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:9px;
    position:relative;
    background:rgba(255,255,255,.018);
}

.campaign-head i::before,
.campaign-head i::after{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    height:1px;
    background:rgba(255,255,255,.35);
}

.campaign-head i::before{
    top:12px;
}

.campaign-head i::after{
    top:18px;
}

/* metrics */

.campaign-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin-top:20px;
    border:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.055);
}

.metric{
    min-height:132px;
    padding:21px 20px;
    background:rgba(12,13,13,.96);
    transition:
        background .22s ease,
        transform .22s ease;
}

.metric:hover{
    background:rgba(18,23,22,.98);
    transform:translateY(-2px);
}

.metric > span{
    display:block;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
    color:rgba(255,255,255,.28);
}

.metric strong{
    display:block;
    margin-top:14px;
    font-family:"Manrope",sans-serif;
    font-size:28px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.045em;
    color:#e9e9e6;
}

.metric small{
    display:block;
    margin-top:9px;
    font-size:9px;
    color:rgba(255,255,255,.31);
}

/* campaign activity line */

.campaign-line{
    display:flex;
    align-items:flex-end;
    gap:7px;
    height:70px;
    margin-top:20px;
    padding:0 4px 3px;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.campaign-line span{
    flex:1;
    min-width:4px;
    border-radius:2px 2px 0 0;
    background:linear-gradient(
        180deg,
        rgba(96,143,137,.72),
        rgba(43,119,112,.16)
    );
    opacity:.72;
}

.campaign-line span:nth-child(1){height:25%}
.campaign-line span:nth-child(2){height:39%}
.campaign-line span:nth-child(3){height:31%}
.campaign-line span:nth-child(4){height:55%}
.campaign-line span:nth-child(5){height:47%}
.campaign-line span:nth-child(6){height:69%}
.campaign-line span:nth-child(7){height:57%}
.campaign-line span:nth-child(8){height:84%}

/* wide desktop */

@media (min-width:1450px){
    .marketing-layout{
        gap:125px;
    }

    .marketing-copy h2{
        font-size:74px;
    }

    .campaign-panel{
        padding:28px;
    }

    .metric{
        min-height:145px;
    }
}

/* tablet */

@media (max-width:900px){
    .marketing-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .marketing-copy{
        max-width:760px;
    }

    .marketing-copy h2{
        font-size:clamp(42px,7vw,61px);
    }

    .campaign-panel{
        max-width:760px;
    }
}

/* phones */

@media (max-width:650px){
    .marketing-layout{
        gap:34px;
    }

    .marketing-copy h2{
        font-size:clamp(36px,10vw,49px);
    }

    .marketing-copy > p{
        margin-top:18px;
        font-size:14px;
        line-height:1.68;
    }

    .marketing-copy .text-link{
        margin-top:23px;
    }

    .campaign-panel{
        padding:17px;
        border-radius:14px;
    }

    .campaign-head{
        padding-bottom:17px;
    }

    .campaign-metrics{
        margin-top:16px;
    }

    .metric{
        min-height:112px;
        padding:17px 14px;
    }

    .metric strong{
        margin-top:11px;
        font-size:23px;
    }

    .metric small{
        font-size:8px;
    }

    .campaign-line{
        height:56px;
        margin-top:16px;
    }
}

/* very small phones */

@media (max-width:380px){
    .campaign-panel{
        padding:14px;
    }

    .metric{
        min-height:104px;
        padding:14px 12px;
    }

    .metric strong{
        font-size:21px;
    }

    .campaign-head span{
        font-size:8px;
    }
}

/* touch */

@media (hover:none){
    .metric:hover{
        transform:none;
        background:rgba(12,13,13,.96);
    }

    .marketing-copy .text-link:hover{
        gap:9px;
        color:rgba(255,255,255,.66);
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .metric,
    .marketing-copy .text-link{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — THE TANZANITE EXPERIENCE POLISH
   ========================================================= */

.experience-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 50%,rgba(43,119,112,.045),transparent 34%),
        linear-gradient(180deg,#090a0a 0%,#080909 100%);
}

.experience-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(430px,1.14fr);
    gap:clamp(55px,8vw,120px);
    align-items:center;
}

.experience-copy{
    max-width:600px;
}

.experience-copy h2{
    margin:15px 0 0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(42px,5.1vw,70px);
    font-weight:800;
    line-height:.99;
    letter-spacing:-.055em;
    color:#eeeeec;
}

.experience-copy h2 span{
    display:block;
    color:#608f89;
}

.experience-copy > p{
    max-width:530px;
    margin:25px 0 0;
    font-size:15px;
    line-height:1.76;
    color:rgba(255,255,255,.43);
}

.experience-points{
    display:flex;
    flex-direction:column;
    margin-top:31px;
    border-top:1px solid rgba(255,255,255,.07);
}

.experience-points > div{
    display:grid;
    grid-template-columns:27px minmax(0,1fr);
    column-gap:13px;
    position:relative;
    padding:17px 0;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.experience-points > div > span{
    grid-row:span 2;
    display:grid;
    place-items:center;
    width:21px;
    height:21px;
    margin-top:1px;
    border:1px solid rgba(43,119,112,.38);
    border-radius:50%;
    color:#72a099;
    font-size:10px;
}

.experience-points strong{
    font-family:"Manrope",sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:-.01em;
    color:#e5e5e2;
}

.experience-points p{
    margin:5px 0 0;
    font-size:10px;
    line-height:1.5;
    color:rgba(255,255,255,.34);
}

/* client space */

.client-space{
    position:relative;
    min-width:0;
    padding:23px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(22,23,23,.97),rgba(9,10,10,.98));
    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.client-space::before{
    content:"";
    position:absolute;
    top:0;
    left:28px;
    right:28px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(43,119,112,.5),
        transparent
    );
}

.client-space-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:19px;
    border-bottom:1px solid rgba(255,255,255,.065);
}

.client-space-head > div:first-child{
    display:flex;
    align-items:center;
    gap:11px;
}

.client-space-head span{
    font-size:8px;
    font-weight:700;
    letter-spacing:.17em;
    color:rgba(255,255,255,.32);
}

.client-space-head strong{
    position:relative;
    padding-left:11px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
    color:#76a29d;
}

.client-space-head strong::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#5b8d87;
    transform:translateY(-50%);
    box-shadow:0 0 0 3px rgba(43,119,112,.10);
}

.client-avatar{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:9px;
    background:rgba(255,255,255,.025);
    font-size:9px;
    font-weight:800;
    letter-spacing:.06em;
    color:rgba(255,255,255,.48);
}

/* project overview */

.project-overview{
    margin-top:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    background:rgba(7,8,8,.58);
}

.project-title{
    padding:20px 20px 16px;
}

.project-title small{
    display:block;
    font-size:8px;
    font-weight:700;
    letter-spacing:.15em;
    color:rgba(255,255,255,.27);
}

.project-title strong{
    display:block;
    margin-top:8px;
    font-family:"Manrope",sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.025em;
    color:#e8e8e5;
}

/* progress */

.project-progress{
    padding:0 20px 20px;
}

.progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
}

.progress-top span{
    font-size:8px;
    font-weight:700;
    letter-spacing:.13em;
    color:rgba(255,255,255,.27);
}

.progress-top strong{
    font-size:11px;
    font-weight:800;
    color:#78a49f;
}

.progress-track{
    height:5px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.055);
}

.progress-track span{
    display:block;
    width:72%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(
        90deg,
        #315f5b,
        #68958f
    );
}

/* project stages */

.project-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.055);
    border-bottom:1px solid rgba(255,255,255,.055);
}

.project-step{
    position:relative;
    min-width:0;
    padding:17px 10px 18px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.055);
}

.project-step:last-child{
    border-right:0;
}

.project-step > span{
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    margin:0 auto 9px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;
    color:rgba(255,255,255,.28);
    font-size:8px;
    font-weight:800;
}

.project-step.done > span{
    border-color:rgba(43,119,112,.48);
    color:#78a49f;
    background:rgba(43,119,112,.07);
}

.project-step.current > span{
    border-color:rgba(96,143,137,.65);
    color:#a2c0bc;
    background:rgba(43,119,112,.12);
    box-shadow:0 0 0 4px rgba(43,119,112,.06);
}

.project-step small{
    display:none;
}

.project-step strong{
    display:block;
    overflow:hidden;
    font-size:7px;
    font-weight:800;
    letter-spacing:.09em;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,.30);
}

.project-step.done strong,
.project-step.current strong{
    color:rgba(255,255,255,.62);
}

/* update */

.project-update{
    display:grid;
    grid-template-columns:31px minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    padding:17px 18px;
}

.update-mark{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border:1px solid rgba(43,119,112,.28);
    border-radius:9px;
    background:rgba(43,119,112,.07);
    font-size:8px;
    font-weight:800;
    color:#76a29d;
}

.project-update > div:nth-child(2) span{
    display:block;
    font-size:7px;
    font-weight:700;
    letter-spacing:.12em;
    color:rgba(255,255,255,.25);
}

.project-update > div:nth-child(2) strong{
    display:block;
    margin-top:5px;
    font-size:10px;
    font-weight:700;
    line-height:1.35;
    color:rgba(255,255,255,.61);
}

.project-update time{
    font-size:7px;
    font-weight:700;
    letter-spacing:.1em;
    color:rgba(255,255,255,.23);
}

/* wide desktop */

@media (min-width:1450px){
    .experience-layout{
        gap:125px;
    }

    .experience-copy h2{
        font-size:74px;
    }

    .client-space{
        padding:27px;
    }
}

/* tablet */

@media (max-width:900px){
    .experience-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .experience-copy{
        max-width:760px;
    }

    .experience-copy h2{
        font-size:clamp(42px,7vw,61px);
    }

    .client-space{
        max-width:760px;
    }
}

/* phones */

@media (max-width:650px){
    .experience-layout{
        gap:34px;
    }

    .experience-copy h2{
        font-size:clamp(36px,10vw,49px);
    }

    .experience-copy > p{
        margin-top:18px;
        font-size:14px;
        line-height:1.68;
    }

    .experience-points{
        margin-top:24px;
    }

    .experience-points > div{
        padding:14px 0;
    }

    .client-space{
        padding:15px;
        border-radius:14px;
    }

    .client-space-head{
        padding-bottom:15px;
    }

    .project-overview{
        margin-top:15px;
    }

    .project-title{
        padding:17px 15px 14px;
    }

    .project-title strong{
        font-size:16px;
    }

    .project-progress{
        padding:0 15px 16px;
    }

    .project-step{
        padding:14px 5px 15px;
    }

    .project-step > span{
        width:21px;
        height:21px;
        margin-bottom:8px;
    }

    .project-step strong{
        font-size:6px;
        letter-spacing:.06em;
    }

    .project-update{
        grid-template-columns:28px minmax(0,1fr);
        padding:14px 15px;
    }

    .update-mark{
        width:28px;
        height:28px;
    }

    .project-update time{
        display:none;
    }
}

/* very small phones */

@media (max-width:380px){
    .client-space{
        padding:12px;
    }

    .project-step{
        padding-left:3px;
        padding-right:3px;
    }

    .project-step strong{
        font-size:5.5px;
    }
}

/* touch */

@media (hover:none){
    .project-step,
    .client-space{
        -webkit-tap-highlight-color:transparent;
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .client-space,
    .project-step{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — WHY TANZANITE DIGITAL POLISH
   ========================================================= */

.why-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(43,119,112,.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #080909 0%,
            #090a0a 100%
        );
}

.why-section::before{
    content:"";
    position:absolute;
    top:50%;
    right:-170px;
    width:430px;
    height:430px;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
    transform:translateY(-50%);
    pointer-events:none;
}

.why-section::after{
    content:"";
    position:absolute;
    top:50%;
    right:-55px;
    width:195px;
    height:195px;
    border:1px solid rgba(43,119,112,.08);
    border-radius:50%;
    transform:translateY(-50%);
    pointer-events:none;
}

.why-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(360px,.85fr);
    gap:clamp(70px,10vw,155px);
    align-items:center;
}

.why-layout > div:first-child{
    position:relative;
    padding-left:1px;
}

.why-layout > div:first-child::before{
    content:"";
    position:absolute;
    left:-22px;
    top:5px;
    width:1px;
    height:76px;
    background:linear-gradient(
        180deg,
        rgba(96,143,137,.75),
        transparent
    );
}

.why-layout h2{
    max-width:650px;
    margin:17px 0 0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(48px,6.2vw,82px);
    font-weight:800;
    line-height:.96;
    letter-spacing:-.065em;
    color:#eeeeeb;
}

.why-layout h2 span{
    display:block;
    color:#638f89;
}

.why-content{
    position:relative;
    max-width:540px;
}

.why-lead{
    max-width:510px;
    margin:0;
    font-size:17px;
    line-height:1.75;
    color:rgba(255,255,255,.47);
}

.why-statement{
    display:flex;
    flex-direction:column;
    margin-top:36px;
    border-top:1px solid rgba(255,255,255,.075);
}

.why-statement span{
    position:relative;
    display:flex;
    align-items:center;
    min-height:54px;
    padding:0 0 0 25px;
    border-bottom:1px solid rgba(255,255,255,.065);
    font-family:"Manrope",sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.68);
}

.why-statement span::before{
    content:"";
    position:absolute;
    left:0;
    width:7px;
    height:7px;
    border:1px solid rgba(96,143,137,.7);
    border-radius:50%;
    background:rgba(43,119,112,.08);
}

.why-statement span::after{
    content:"↗";
    position:absolute;
    right:2px;
    font-size:11px;
    font-weight:500;
    color:rgba(255,255,255,.18);
    transition:
        color .25s ease,
        transform .25s ease;
}

.why-statement span:hover{
    color:#e5e5e2;
}

.why-statement span:hover::before{
    background:rgba(43,119,112,.35);
    box-shadow:0 0 0 4px rgba(43,119,112,.055);
}

.why-statement span:hover::after{
    color:#719b95;
    transform:translate(2px,-2px);
}

/* subtle section label treatment */

.why-section .section-label{
    color:rgba(255,255,255,.31);
}

/* wide desktop */

@media (min-width:1450px){
    .why-layout{
        gap:150px;
    }

    .why-layout h2{
        font-size:86px;
    }

    .why-lead{
        font-size:17px;
    }

    .why-statement span{
        min-height:58px;
    }
}

/* large screens */

@media (min-width:1800px){
    .why-section::before{
        right:-110px;
    }

    .why-section::after{
        right:25px;
    }
}

/* tablet */

@media (max-width:900px){
    .why-layout{
        grid-template-columns:1fr;
        gap:48px;
    }

    .why-layout h2{
        max-width:720px;
        font-size:clamp(46px,8vw,68px);
    }

    .why-content{
        max-width:720px;
    }

    .why-lead{
        max-width:650px;
    }

    .why-section::before{
        right:-230px;
        opacity:.7;
    }

    .why-section::after{
        right:-100px;
        opacity:.7;
    }
}

/* phones */

@media (max-width:650px){
    .why-layout{
        gap:32px;
    }

    .why-layout > div:first-child::before{
        left:-13px;
        height:58px;
    }

    .why-layout h2{
        font-size:clamp(39px,10.5vw,53px);
        line-height:.98;
    }

    .why-lead{
        font-size:14px;
        line-height:1.7;
    }

    .why-statement{
        margin-top:25px;
    }

    .why-statement span{
        min-height:49px;
        padding-left:22px;
        font-size:11px;
    }

    .why-statement span::before{
        width:6px;
        height:6px;
    }

    .why-section::before{
        width:300px;
        height:300px;
        right:-190px;
    }

    .why-section::after{
        width:130px;
        height:130px;
        right:-75px;
    }
}

/* very small phones */

@media (max-width:380px){
    .why-layout h2{
        font-size:37px;
    }

    .why-lead{
        font-size:13px;
    }

    .why-statement span{
        min-height:46px;
        font-size:10px;
    }
}

/* touch */

@media (hover:none){
    .why-statement span:hover{
        color:rgba(255,255,255,.68);
    }

    .why-statement span:hover::after{
        color:rgba(255,255,255,.18);
        transform:none;
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .why-statement span::after{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — FINAL CTA POLISH
   ========================================================= */

.cta-section{
    position:relative;
    overflow:hidden;
    padding-top:clamp(80px,9vw,135px);
    padding-bottom:clamp(85px,10vw,145px);
    background:#070808;
}

.cta-section .container{
    position:relative;
    z-index:1;
}

.cta-card{
    position:relative;
    min-height:500px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,8vw,105px) 30px;
    text-align:center;
    border:1px solid rgba(255,255,255,.085);
    border-radius:24px;
    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(43,119,112,.095),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #111313 0%,
            #090a0a 55%,
            #080909 100%
        );
    box-shadow:
        0 40px 100px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.cta-card::before{
    content:"";
    position:absolute;
    inset:18px;
    border:1px solid rgba(255,255,255,.025);
    border-radius:17px;
    pointer-events:none;
}

.cta-card::after{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:240px;
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(96,143,137,.65),
        transparent
    );
}

.cta-card .section-label{
    position:relative;
    z-index:3;
    color:rgba(255,255,255,.36);
}

.cta-card h2{
    position:relative;
    z-index:3;
    max-width:850px;
    margin:18px 0 0;
    font-family:"Manrope",sans-serif;
    font-size:clamp(54px,7.2vw,94px);
    font-weight:800;
    line-height:.94;
    letter-spacing:-.068em;
    color:#eeeeeb;
}

.cta-card h2 span{
    display:block;
    color:#67928c;
}

.cta-card > p{
    position:relative;
    z-index:3;
    max-width:570px;
    margin:27px auto 0;
    font-size:15px;
    line-height:1.72;
    color:rgba(255,255,255,.40);
}

.cta-actions{
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    margin-top:34px;
}

.cta-actions .btn{
    min-height:48px;
    padding:0 21px;
    border-radius:8px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.cta-actions .btn-primary{
    border:1px solid rgba(96,143,137,.42);
    background:#315f5b;
    color:#eef4f2;
    box-shadow:
        0 10px 28px rgba(43,119,112,.13),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.cta-actions .btn-primary:hover{
    background:#396d67;
    border-color:rgba(115,160,153,.52);
    transform:translateY(-2px);
}

.cta-actions .btn-ghost{
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.025);
    color:rgba(255,255,255,.60);
}

.cta-actions .btn-ghost:hover{
    border-color:rgba(255,255,255,.19);
    background:rgba(255,255,255,.045);
    color:#eeeeeb;
    transform:translateY(-2px);
}

/* orbit decoration */

.cta-orbit{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid rgba(255,255,255,.035);
    border-radius:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.orbit-one{
    width:540px;
    height:540px;
}

.orbit-two{
    width:360px;
    height:360px;
    border-color:rgba(43,119,112,.065);
}

.orbit-one::after,
.orbit-two::after{
    content:"";
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(96,143,137,.42);
    box-shadow:0 0 14px rgba(96,143,137,.22);
}

.orbit-one::after{
    top:21%;
    left:7%;
}

.orbit-two::after{
    right:9%;
    bottom:19%;
}

/* keep content above orbit */

.cta-card .section-label,
.cta-card h2,
.cta-card > p,
.cta-actions{
    isolation:isolate;
}

/* wide desktop */

@media (min-width:1450px){
    .cta-card{
        min-height:560px;
        border-radius:26px;
    }

    .cta-card h2{
        font-size:98px;
    }

    .orbit-one{
        width:620px;
        height:620px;
    }

    .orbit-two{
        width:410px;
        height:410px;
    }
}

/* large screens */

@media (min-width:1900px){
    .cta-card{
        min-height:600px;
    }

    .cta-card h2{
        font-size:106px;
    }
}

/* tablet */

@media (max-width:900px){
    .cta-card{
        min-height:450px;
        padding:75px 28px;
    }

    .cta-card h2{
        font-size:clamp(50px,8vw,72px);
    }

    .orbit-one{
        width:470px;
        height:470px;
    }

    .orbit-two{
        width:315px;
        height:315px;
    }
}

/* phones */

@media (max-width:650px){
    .cta-section{
        padding-top:60px;
        padding-bottom:70px;
    }

    .cta-card{
        min-height:440px;
        padding:65px 20px;
        border-radius:17px;
    }

    .cta-card::before{
        inset:11px;
        border-radius:11px;
    }

    .cta-card h2{
        font-size:clamp(42px,11vw,57px);
        line-height:.96;
    }

    .cta-card > p{
        max-width:430px;
        margin-top:20px;
        font-size:13px;
        line-height:1.68;
    }

    .cta-actions{
        width:100%;
        flex-direction:column;
        gap:9px;
        margin-top:27px;
    }

    .cta-actions .btn{
        width:min(100%,280px);
        min-height:46px;
    }

    .orbit-one{
        width:340px;
        height:340px;
    }

    .orbit-two{
        width:225px;
        height:225px;
    }
}

/* very small phones */

@media (max-width:380px){
    .cta-card{
        min-height:420px;
        padding-left:16px;
        padding-right:16px;
    }

    .cta-card h2{
        font-size:40px;
    }

    .cta-card > p{
        font-size:12px;
    }

    .orbit-one{
        width:285px;
        height:285px;
    }

    .orbit-two{
        width:190px;
        height:190px;
    }
}

/* touch */

@media (hover:none){
    .cta-actions .btn-primary:hover,
    .cta-actions .btn-ghost:hover{
        transform:none;
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .cta-actions .btn-primary,
    .cta-actions .btn-ghost{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — FOOTER POLISH
   ========================================================= */

.site-footer{
    position:relative;
    overflow:hidden;
    background:#060707;
    border-top:1px solid rgba(255,255,255,.065);
}

.site-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(900px,70vw);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(43,119,112,.32),
        transparent
    );
}

.site-footer .container{
    position:relative;
    z-index:1;
}

.footer-main{
    display:grid;
    grid-template-columns:minmax(280px,1.65fr) repeat(3,minmax(120px,.7fr));
    gap:clamp(40px,6vw,95px);
    padding:clamp(65px,7vw,95px) 0 60px;
}

.footer-brand{
    max-width:390px;
}

.footer-brand .brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
}

.footer-brand .brand-mark{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid rgba(96,143,137,.30);
    border-radius:10px;
    background:rgba(43,119,112,.055);
    color:#719c96;
    font-size:10px;
    font-weight:800;
    letter-spacing:.05em;
}

.footer-brand .brand-copy{
    display:flex;
    flex-direction:column;
}

.footer-brand .brand-copy strong{
    font-family:"Manrope",sans-serif;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.02em;
    color:#e5e5e2;
}

.footer-brand .brand-copy small{
    margin-top:3px;
    font-size:7px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.27);
}

.footer-brand > p{
    max-width:340px;
    margin:21px 0 0;
    font-size:12px;
    line-height:1.75;
    color:rgba(255,255,255,.34);
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer-column > span{
    margin-bottom:17px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.16em;
    color:rgba(255,255,255,.25);
}

.footer-column a{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:31px;
    font-size:11px;
    color:rgba(255,255,255,.48);
    text-decoration:none;
    transition:
        color .22s ease,
        transform .22s ease;
}

.footer-column a::after{
    content:"↗";
    margin-left:6px;
    font-size:8px;
    opacity:0;
    transform:translate(-3px,3px);
    transition:
        opacity .22s ease,
        transform .22s ease;
}

.footer-column a:hover{
    color:#dfe5e3;
    transform:translateX(2px);
}

.footer-column a:hover::after{
    opacity:.6;
    transform:translate(0,0);
}

/* bottom */

.footer-bottom{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:25px;
    min-height:66px;
    border-top:1px solid rgba(255,255,255,.065);
    font-size:8px;
    letter-spacing:.03em;
    color:rgba(255,255,255,.24);
}

.footer-bottom > span:last-child{
    text-align:right;
}

.footer-bottom strong{
    font-size:8px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.31);
}

/* floating WhatsApp */

.floating-contact{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:80;
    display:grid;
    place-items:center;
    width:47px;
    height:47px;
    border:1px solid rgba(93,161,105,.42);
    border-radius:50%;
    background:#183c22;
    box-shadow:
        0 12px 32px rgba(0,0,0,.38),
        0 0 0 5px rgba(42,126,61,.055);
    color:#82d68d;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.floating-contact svg{
    width:21px;
    height:21px;
    fill:currentColor;
}

.floating-contact:hover{
    transform:translateY(-3px);
    background:#20542d;
    border-color:rgba(111,190,121,.62);
}

/* wide desktop */

@media (min-width:1450px){
    .footer-main{
        padding-top:105px;
        padding-bottom:70px;
    }

    .footer-brand > p{
        font-size:12px;
    }

    .floating-contact{
        right:30px;
        bottom:30px;
        width:50px;
        height:50px;
    }
}

/* tablet */

@media (max-width:900px){
    .footer-main{
        grid-template-columns:1.5fr 1fr 1fr;
        gap:42px 35px;
    }

    .footer-brand{
        grid-column:1 / -1;
        max-width:580px;
    }

    .footer-bottom{
        grid-template-columns:1fr 1fr;
    }

    .footer-bottom strong{
        display:none;
    }

    .footer-bottom > span:last-child{
        text-align:right;
    }
}

/* phones */

@media (max-width:650px){
    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:38px 28px;
        padding:55px 0 42px;
    }

    .footer-brand{
        grid-column:1 / -1;
    }

    .footer-brand > p{
        max-width:430px;
        margin-top:17px;
        font-size:11px;
    }

    .footer-column > span{
        margin-bottom:12px;
    }

    .footer-column a{
        min-height:29px;
        font-size:10px;
    }

    .footer-bottom{
        grid-template-columns:1fr;
        gap:5px;
        padding:18px 0 22px;
        min-height:auto;
    }

    .footer-bottom > span:last-child{
        text-align:left;
    }

    .floating-contact{
        right:17px;
        bottom:17px;
        width:44px;
        height:44px;
    }

    .floating-contact svg{
        width:19px;
        height:19px;
    }
}

/* very small phones */

@media (max-width:380px){
    .footer-main{
        gap:32px 20px;
    }

    .footer-brand .brand-mark{
        width:35px;
        height:35px;
    }

    .footer-brand .brand-copy strong{
        font-size:13px;
    }

    .footer-column a{
        font-size:9px;
    }

    .floating-contact{
        right:13px;
        bottom:13px;
    }
}

/* touch */

@media (hover:none){
    .footer-column a:hover{
        color:rgba(255,255,255,.48);
        transform:none;
    }

    .footer-column a:hover::after{
        opacity:0;
        transform:translate(-3px,3px);
    }

    .floating-contact:hover{
        transform:none;
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .footer-column a,
    .footer-column a::after,
    .floating-contact{
        transition:none;
    }
}


/* =========================================================
   TANZANITE DIGITAL — LIVE DIGITAL ENVIRONMENT POLISH
   ========================================================= */

.live-panel{
    position:relative;
    overflow:hidden;
    margin-top:clamp(28px,4vw,52px);
    padding:0;
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(43,119,112,.055),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(18,20,20,.96),
            rgba(8,9,9,.98)
        );
    box-shadow:
        0 24px 70px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.live-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:6%;
    width:88%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(96,143,137,.35),
        transparent
    );
}

.live-panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:21px 24px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.live-panel-top > div:first-child{
    display:flex;
    align-items:baseline;
    gap:13px;
    min-width:0;
}

.live-panel-top small{
    flex:0 0 auto;
    font-size:7px;
    font-weight:800;
    letter-spacing:.17em;
    color:rgba(255,255,255,.27);
}

.live-panel-top strong{
    overflow:hidden;
    font-family:"Manrope",sans-serif;
    font-size:10px;
    font-weight:800;
    letter-spacing:.02em;
    color:rgba(255,255,255,.58);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.online-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    min-height:25px;
    padding:0 10px;
    border:1px solid rgba(93,161,105,.20);
    border-radius:999px;
    background:rgba(42,126,61,.055);
    font-size:7px;
    font-weight:800;
    letter-spacing:.12em;
    color:rgba(125,190,133,.72);
}

.online-pill i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#70b879;
    box-shadow:0 0 0 3px rgba(93,161,105,.08);
}

/* live cards */

.live-stack{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:rgba(255,255,255,.055);
}

.live-card{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    min-width:0;
    min-height:86px;
    padding:18px 20px;
    background:#0b0d0d;
    transition:
        background .25s ease,
        transform .25s ease;
}

.live-card:hover{
    z-index:2;
    background:#0f1212;
    transform:translateY(-1px);
}

.live-card.active{
    background:
        linear-gradient(
            110deg,
            rgba(43,119,112,.075),
            rgba(11,13,13,.98) 60%
        );
}

.live-card.active::before{
    content:"";
    position:absolute;
    left:0;
    top:15px;
    bottom:15px;
    width:2px;
    background:#4f827c;
}

.live-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:10px;
    background:rgba(255,255,255,.025);
    font-size:14px;
    color:rgba(255,255,255,.42);
}

.live-card.active .live-icon{
    border-color:rgba(43,119,112,.25);
    background:rgba(43,119,112,.065);
    color:#719c96;
}

.live-info{
    min-width:0;
}

.live-info span{
    display:block;
    margin-bottom:5px;
    font-size:7px;
    font-weight:800;
    letter-spacing:.14em;
    color:rgba(255,255,255,.25);
}

.live-info strong{
    display:block;
    overflow:hidden;
    font-family:"Manrope",sans-serif;
    font-size:11px;
    font-weight:800;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.66);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.live-card > b{
    font-size:7px;
    font-weight:800;
    letter-spacing:.10em;
    color:rgba(255,255,255,.27);
}

.live-card.active > b{
    color:#72a099;
}

/* bottom */

.live-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:19px 24px;
    border-top:1px solid rgba(255,255,255,.055);
    background:rgba(255,255,255,.008);
}

.live-bottom > div{
    min-width:0;
}

.live-bottom span{
    display:block;
    margin-bottom:5px;
    font-size:7px;
    font-weight:800;
    letter-spacing:.14em;
    color:rgba(255,255,255,.24);
}

.live-bottom strong{
    display:block;
    font-family:"Manrope",sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:-.01em;
    color:rgba(255,255,255,.64);
}

.live-bottom a{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:9px;
    background:rgba(255,255,255,.02);
    color:rgba(255,255,255,.45);
    font-size:12px;
    text-decoration:none;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease;
}

.live-bottom a:hover{
    color:#7ca59f;
    border-color:rgba(96,143,137,.30);
    background:rgba(43,119,112,.06);
    transform:translate(2px,-2px);
}

/* wide desktop */

@media (min-width:1450px){
    .live-panel{
        border-radius:18px;
    }

    .live-panel-top{
        padding:23px 27px;
    }

    .live-card{
        min-height:94px;
        padding:20px 23px;
    }

    .live-bottom{
        padding:21px 27px;
    }
}

/* tablet */

@media (max-width:900px){
    .live-stack{
        grid-template-columns:1fr;
        gap:1px;
    }

    .live-card{
        min-height:78px;
    }
}

/* phones */

@media (max-width:650px){
    .live-panel{
        margin-top:27px;
        border-radius:13px;
    }

    .live-panel-top{
        align-items:flex-start;
        padding:17px 16px;
    }

    .live-panel-top > div:first-child{
        display:flex;
        flex-direction:column;
        gap:5px;
    }

    .live-panel-top small{
        font-size:6.5px;
    }

    .live-panel-top strong{
        font-size:9px;
    }

    .online-pill{
        min-height:23px;
        padding:0 8px;
        font-size:6.5px;
    }

    .live-card{
        grid-template-columns:35px minmax(0,1fr) auto;
        gap:11px;
        min-height:73px;
        padding:15px;
    }

    .live-icon{
        width:33px;
        height:33px;
        border-radius:9px;
        font-size:12px;
    }

    .live-info span{
        font-size:6px;
    }

    .live-info strong{
        font-size:10px;
    }

    .live-card > b{
        font-size:6px;
    }

    .live-bottom{
        padding:16px 15px;
    }

    .live-bottom strong{
        font-size:11px;
    }

    .live-bottom a{
        width:31px;
        height:31px;
        font-size:11px;
    }
}

/* very small phones */

@media (max-width:380px){
    .live-panel-top{
        padding:15px 13px;
    }

    .live-card{
        padding:13px;
        gap:9px;
    }

    .live-icon{
        width:31px;
        height:31px;
    }

    .live-info strong{
        font-size:9px;
    }

    .live-bottom{
        padding:14px 13px;
    }
}

/* touch */

@media (hover:none){
    .live-card:hover{
        background:#0b0d0d;
        transform:none;
    }

    .live-card.active:hover{
        background:
            linear-gradient(
                110deg,
                rgba(43,119,112,.075),
                rgba(11,13,13,.98) 60%
            );
    }

    .live-bottom a:hover{
        transform:none;
    }
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
    .live-card,
    .live-bottom a{
        transition:none;
    }
}

/* =========================================================
   TANZANITE DIGITAL — OFFICIAL BRAND LOGO
   Official logo asset only. No logo recreation.
   ========================================================= */

.site-header .brand-logo,
.footer-brand .brand-logo {
    width: 64px;
    height: 43px;
    display: block;
    flex: 0 0 64px;
    object-fit: contain;
    object-position: center;
}

.footer-brand .brand-logo {
    width: 64px;
    height: 43px;
    flex-basis: 64px;
}

@media (max-width: 720px) {
    .site-header .brand-logo,
    .footer-brand .brand-logo {
        width: 56px;
        height: 37px;
        flex-basis: 56px;
    }
}

/* =========================================================
   TANZANITE DIGITAL TECHNOLOGY — CLEAN 7 SECOND OPENING
   ========================================================= */

#tdtRealOpening {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    background: #000;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    display: block;
    transition: opacity .5s ease;
}

#tdtRealOpening .tdt7-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s ease, visibility .65s ease;
}

/* 0–2 seconds: LOGO */

#tdtRealOpening .tdt7-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center,
        rgba(61, 25, 115, .20),
        #000 65%);
}

#tdtRealOpening .tdt7-logo img {
    width: min(78vw, 600px);
    max-width: 90%;
    height: auto;
    object-fit: contain;
    animation: tdt7LogoIn 1.4s ease both;
}

@keyframes tdt7LogoIn {
    from {
        opacity: 0;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2–5 seconds: NEW WALLPAPER */

#tdtRealOpening .tdt7-wallpaper {
    background: #000;
}

#tdtRealOpening .tdt7-wallpaper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
    animation: tdt7WallpaperZoom 3s ease-out both;
}

@keyframes tdt7WallpaperZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.045);
    }
}

/* 5–7 seconds: WELCOME */

#tdtRealOpening .tdt7-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at center,
        rgba(49, 20, 95, .18),
        #000 68%);
}

#tdtRealOpening .tdt7-welcome img {
    width: min(65vw, 500px);
    max-width: 85%;
    height: auto;
    animation: tdt7WelcomeLogo 1s ease both;
}

#tdtRealOpening .tdt7-welcome > div {
    margin-top: 24px;
    color: #fff;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 600;
    letter-spacing: .28em;
    animation: tdt7WelcomeText 1s .12s ease both;
}

#tdtRealOpening .tdt7-welcome small {
    margin-top: 12px;
    color: rgba(255,255,255,.68);
    font-size: clamp(9px, 1.4vw, 14px);
    letter-spacing: .28em;
    animation: tdt7WelcomeText 1s .25s ease both;
}

@keyframes tdt7WelcomeLogo {
    from {
        opacity: 0;
        transform: scale(.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* FINAL EXIT */

#tdtRealOpening.tdt7-finish {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 700px) {

    #tdtRealOpening .tdt7-logo img {
        width: 82vw;
    }

    #tdtRealOpening .tdt7-wallpaper img {
        object-position: center center;
    }

    #tdtRealOpening .tdt7-welcome img {
        width: 75vw;
    }

    #tdtRealOpening .tdt7-welcome > div {
        font-size: 27px;
        letter-spacing: .20em;
    }

    #tdtRealOpening .tdt7-welcome small {
        font-size: 8px;
        letter-spacing: .18em;
    }
}


/* ADMIN MEDIA CONTROL — LOCAL HERO SLIDES */
.work-image-three {
    background-image: url('../images/work/03-slide.jpg') !important;
}

.work-image-seven {
    background-image: url('../images/work/07-slide.png') !important;
}