/*
 * TerKnox hero system v2
 * Shared royal-blue brand treatment and focused banners for Home, Products,
 * and Product Detail. Loaded after each page stylesheet intentionally.
 */
:root {
    --brand-blue: linear-gradient(100deg,#3d8cff,#36d5fa);
    --brand-blue-light: #68a0ff;
    --brand-blue-deep: #0b43c9;
    --brand-navy: #050b19;
}

/* Restore the primary TerKnox royal-blue identity on all three pages. */
.nav-logo a::before {
    color: #fff !important;
    background: linear-gradient(145deg, #2678ff, #0d55e5) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 25px rgba(23,107,255,.34) !important;
}

.nav-logo a::after { letter-spacing: .065em !important; }

/* --------------------------------------------------------------------------
   Home hero: one connected technology ecosystem
   -------------------------------------------------------------------------- */
.tk-hero {
    min-height: 880px;
    padding: 132px 0 78px;
    background:
        radial-gradient(ellipse 55% 65% at 82% 43%, rgba(23,107,255,.22), transparent 68%),
        radial-gradient(ellipse 36% 45% at 8% 92%, rgba(31,111,255,.09), transparent 70%),
        linear-gradient(135deg, #040916 0%, #07132a 58%, #050b19 100%);
}

.tk-hero::before {
    content: '';
    position: absolute;
    inset: 76px 0 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(75,132,218,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,132,218,.13) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(90deg, transparent, #000 48%, #000 78%, transparent);
}

.tk-hero__grid { grid-template-columns: .92fr 1.08fr; gap: 72px; }
.tk-hero-kicker { border-color: rgba(87,145,255,.24); background: rgba(23,107,255,.08); }
.tk-hero-kicker span { color: #fff; background: var(--brand-blue); }
.tk-hero-kicker i, .tk-hero .tk-eyebrow p { color: #8eb7ff; }
.tk-hero .tk-eyebrow > span { background: var(--brand-blue); }
.tk-hero h1 { font-size: clamp(56px, 5.7vw, 84px); }
.tk-hero h1 em { color: var(--brand-blue-light); }
.tk-hero .tk-btn--primary { color: #fff; background: var(--brand-blue); box-shadow: 0 14px 40px rgba(23,107,255,.29); }
.tk-hero .tk-btn--primary:hover { background: #2c79ff; box-shadow: 0 18px 48px rgba(23,107,255,.37); }

.tk-hero__visual { min-width: 600px; height: 535px; perspective: none; }
.tk-hero-canvas {
    position: absolute;
    inset: 7px 0 7px 15px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(13,31,61,.98), rgba(7,18,39,.98));
    border: 1px solid rgba(103,153,235,.21);
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
}

.tk-hero-canvas::before {
    content: '';
    position: absolute;
    inset: 50px 0 66px;
    background: radial-gradient(circle at center, rgba(23,107,255,.18), transparent 48%);
}

.tk-hero-canvas__top {
    position: relative;
    z-index: 5;
    height: 53px;
    padding: 0 19px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(5,13,29,.55);
}

.tk-hero-canvas__top > div { display: flex; gap: 5px; }
.tk-hero-canvas__top > div span { width: 7px; height: 7px; border-radius: 50%; background: #344766; }
.tk-hero-canvas__top p { margin: 0; color: #879ab4; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tk-hero-canvas__top b { justify-self: end; color: #69dba2; font-size: 8px; }
.tk-hero-canvas__top b i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #3bd487; border-radius: 50%; box-shadow: 0 0 0 4px rgba(59,212,135,.09); }

.tk-ecosystem { position: relative; height: 414px; }
.tk-ecosystem__halo, .tk-ecosystem__halo i { position: absolute; inset: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(79,139,235,.14); border-radius: 50%; }
.tk-ecosystem__halo i:nth-child(1) { width: 155px; height: 155px; }
.tk-ecosystem__halo i:nth-child(2) { width: 280px; height: 280px; }
.tk-ecosystem__halo i:nth-child(3) { width: 410px; height: 410px; }
.tk-ecosystem__halo::after { content: ''; position: absolute; inset: 50%; width: 175px; height: 175px; transform: translate(-50%,-50%); background: rgba(23,107,255,.2); border-radius: 50%; filter: blur(45px); }

.tk-ecosystem__core {
    position: absolute;
    z-index: 4;
    inset: 50%;
    width: 148px;
    height: 148px;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(145deg, #123b7f, #0a2250);
    border: 1px solid rgba(105,157,255,.45);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(23,107,255,.06), 0 20px 55px rgba(0,0,0,.35);
}

.tk-ecosystem__core > span { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 12px 4px 12px 4px; font-family: var(--tk-display); font-size: 15px; font-weight: 700; }
.tk-ecosystem__core strong { margin-top: 9px; color: #fff; font-size: 10px; }
.tk-ecosystem__core small { margin-top: 2px; color: #7f96b5; font-size: 7px; }

.tk-ecosystem-node {
    position: absolute;
    z-index: 5;
    min-width: 178px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(13,32,62,.94);
    border: 1px solid rgba(105,153,227,.18);
    border-radius: 13px;
    box-shadow: 0 16px 35px rgba(0,0,0,.25);
    backdrop-filter: blur(10px);
}

.tk-ecosystem-node > span { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#2779ff,#0d54dc); border-radius: 9px; font-size: 12px; }
.tk-ecosystem-node p { display: flex; flex-direction: column; margin: 0; }
.tk-ecosystem-node strong { color: #edf4ff; font-size: 9px; }
.tk-ecosystem-node small { margin-top: 3px; color: #778ca8; font-size: 7px; }
.tk-ecosystem-node--web { top: 38px; left: 31px; }
.tk-ecosystem-node--ai { top: 55px; right: 27px; }
.tk-ecosystem-node--mobile { left: 23px; bottom: 35px; }
.tk-ecosystem-node--cloud { right: 35px; bottom: 26px; }

.tk-hero-canvas__bottom {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 0;
    left: 0;
    height: 66px;
    padding: 0 19px;
    display: grid;
    grid-template-columns: 1fr 150px auto;
    gap: 18px;
    align-items: center;
    background: rgba(5,14,31,.88);
    border-top: 1px solid rgba(255,255,255,.08);
}

.tk-hero-canvas__bottom > div:first-child { display: flex; align-items: center; gap: 9px; }
.tk-hero-canvas__bottom > div:first-child > span { width: 31px; height: 31px; display: grid; place-items: center; color: #58dfa0; background: rgba(58,210,137,.1); border-radius: 8px; font-size: 9px; }
.tk-hero-canvas__bottom p { display: flex; flex-direction: column; margin: 0; }
.tk-hero-canvas__bottom small { color: #7286a1; font-size: 7px; }
.tk-hero-canvas__bottom strong { color: #e5edf8; font-size: 9px; }
.tk-delivery-line { display: flex; gap: 5px; }
.tk-delivery-line i { flex: 1; height: 4px; background: #176bff; border-radius: 4px; }
.tk-delivery-line i:last-child { background: #263b5b; }
.tk-hero-canvas__bottom > b { color: #83aaf0; font-size: 8px; }

.tk-hero-float { position: absolute; z-index: 10; display: flex; align-items: center; color: #fff; background: rgba(7,19,41,.97); border: 1px solid rgba(113,157,226,.2); border-radius: 14px; box-shadow: 0 20px 45px rgba(0,0,0,.32); }
.tk-hero-float--quality { top: -13px; right: -27px; padding: 12px 14px; gap: 10px; }
.tk-hero-float--quality > span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 9px; }
.tk-hero-float p { display: flex; flex-direction: column; margin: 0; }
.tk-hero-float strong { font-size: 9px; }.tk-hero-float small { margin-top: 2px; color: #7d91aa; font-size: 7px; }
.tk-hero-float--quality > i { margin-left: 10px; color: #4edc97; font-size: 9px; }
.tk-hero-float--growth { left: -30px; bottom: 37px; padding: 13px 15px; gap: 11px; }
.tk-hero-float--growth > strong { color: #7ba9ff; font-family: var(--tk-display); font-size: 24px; }
.tk-hero-float--growth p span { font-size: 9px; font-weight: 700; }.tk-hero-float--growth > i { margin-left: 8px; color: #4edc97; }

/* --------------------------------------------------------------------------
   Products hero: cinematic connected AI suite
   -------------------------------------------------------------------------- */
.tp-hero {
    min-height: 970px;
    padding: 135px 0 85px;
    display: block;
    background:
        radial-gradient(ellipse 54% 45% at 50% 53%, rgba(23,107,255,.21), transparent 72%),
        linear-gradient(180deg, #040916 0%, #071329 62%, #050b19 100%);
}

.tp-hero__aurora span { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(4px); }
.tp-hero__aurora span:nth-child(1) { width: 420px; height: 420px; top: 130px; left: -250px; background: rgba(23,107,255,.12); }
.tp-hero__aurora span:nth-child(2) { width: 330px; height: 330px; top: 30px; right: -190px; background: rgba(61,126,255,.1); }
.tp-hero__aurora span:nth-child(3) { width: 250px; height: 250px; right: 18%; bottom: -140px; background: rgba(71,215,255,.05); }
.tp-hero__grid { display: block; }
.tp-hero__copy { max-width: 920px; margin: auto; text-align: center; }
.tp-suite-pill { width: fit-content; margin: 0 auto 22px; padding: 6px 10px 6px 6px; display: flex; align-items: center; gap: 9px; color: #dce8f8; background: rgba(23,107,255,.09); border: 1px solid rgba(91,143,233,.23); border-radius: 30px; }
.tp-suite-pill > span { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 50%; font-size: 9px; }
.tp-suite-pill p { margin: 0; font-size: 10px; font-weight: 700; }
.tp-suite-pill b { padding: 4px 7px; color: #88b2ff; background: rgba(23,107,255,.12); border-radius: 20px; font-size: 7px; text-transform: uppercase; }
.tp-hero .tp-eyebrow { justify-content: center; }
.tp-hero .tp-eyebrow > span { background: var(--brand-blue); }
.tp-hero .tp-eyebrow p { color: #89a9d3; }
.tp-hero h1 { max-width: 930px; margin-inline: auto; font-size: clamp(58px, 6.5vw, 91px); line-height: .96; }
.tp-hero h1 em { color: var(--brand-blue-light); }
.tp-hero__lead { max-width: 700px; margin: 24px auto 29px; }
.tp-hero__actions, .tp-proof-row { justify-content: center; }
.tp-hero .tp-btn--primary { color: #fff; background: var(--brand-blue); box-shadow: 0 14px 40px rgba(23,107,255,.3); }

.tp-ai-stage {
    position: relative;
    width: min(900px, 100%);
    height: 435px;
    margin: 62px auto 0;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(11,27,55,.97), rgba(6,17,37,.98));
    border: 1px solid rgba(91,145,232,.2);
    border-radius: 25px;
    box-shadow: 0 40px 100px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.04);
}

.tp-ai-stage__grid { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(75,130,214,.12) 1px, transparent 1px),linear-gradient(90deg,rgba(75,130,214,.12) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle,#000,transparent 75%); }
.tp-ai-stage__rings, .tp-ai-stage__rings span { position: absolute; inset: 46% 50%; transform: translate(-50%,-50%); border: 1px solid rgba(87,142,232,.14); border-radius: 50%; }
.tp-ai-stage__rings span:nth-child(1) { width: 160px; height: 160px; }.tp-ai-stage__rings span:nth-child(2) { width: 285px; height: 285px; }.tp-ai-stage__rings span:nth-child(3) { width: 470px; height: 470px; }
.tp-ai-stage__core { position: absolute; z-index: 5; top: 46%; left: 50%; width: 155px; height: 155px; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(145deg,#123d83,#091e47); border: 1px solid rgba(101,154,255,.45); border-radius: 50%; box-shadow: 0 0 0 12px rgba(23,107,255,.05),0 0 75px rgba(23,107,255,.18); }
.tp-ai-stage__core > i { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 12px; }
.tp-ai-stage__core strong { margin-top: 9px; font-size: 12px; }.tp-ai-stage__core small { margin-top: 2px; color: #8298b5; font-size: 7px; }.tp-ai-stage__core b { margin-top: 8px; padding: 4px 7px; color: #55db99; background: rgba(60,211,139,.08); border-radius: 20px; font-size: 7px; }.tp-ai-stage__core b i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; background: #45d68c; border-radius: 50%; }

.tp-channel-node { position: absolute; z-index: 6; min-width: 190px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; color: #edf4ff; background: rgba(13,31,60,.95); border: 1px solid rgba(99,147,220,.2); border-radius: 13px; box-shadow: 0 16px 35px rgba(0,0,0,.25); }
.tp-channel-node > span { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 9px; font-size: 11px; }.tp-channel-node p { flex: 1; display: flex; flex-direction: column; margin: 0; }.tp-channel-node strong { font-size: 9px; }.tp-channel-node small { margin-top: 3px; color: #788da8; font-size: 7px; }.tp-channel-node > b { color: #73a5ff; font-size: 8px; }
.tp-channel-node--chat { top: 43px; left: 56px; }.tp-channel-node--voice { top: 57px; right: 50px; }.tp-channel-node--wa { left: 51px; bottom: 78px; }.tp-channel-node--wa > span { background: #16a968; }.tp-channel-node--lead { right: 55px; bottom: 77px; }.tp-channel-node--lead > span { background: #e79728; }
.tp-ai-stage__footer { position: absolute; z-index: 7; right: 0; bottom: 0; left: 0; height: 63px; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 28px; background: rgba(4,12,27,.9); border-top: 1px solid rgba(255,255,255,.08); }
.tp-ai-stage__footer > div { display: flex; align-items: center; gap: 9px; }.tp-ai-stage__footer > div > span { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: var(--brand-blue); border-radius: 8px; font-size: 8px; }.tp-ai-stage__footer p { display: flex; flex-direction: column; margin: 0; text-align: left; }.tp-ai-stage__footer small { color: #70859f; font-size: 7px; }.tp-ai-stage__footer strong { color: #e7eef8; font-size: 9px; }.tp-ai-stage__footer > i { color: #49617e; font-size: 10px; }

/* --------------------------------------------------------------------------
   Product detail hero: clear product story + large flat preview
   -------------------------------------------------------------------------- */
.pd-hero {
    min-height: 0;
    padding: 108px 0 75px;
    background:
        radial-gradient(ellipse 45% 36% at 50% 35%, color-mix(in srgb,var(--pd-accent) 16%,transparent), transparent 75%),
        linear-gradient(180deg,#040916 0%,#071329 72%,#050b19 100%);
}

.pd-breadcrumb { margin-bottom: 30px; }
.pd-hero__grid { display: block; }
.pd-hero__copy { max-width: 880px; margin: auto; text-align: center; }
.pd-product-label { width: fit-content; margin: 0 auto 25px; justify-content: center; }
.pd-product-label > span { color: #fff; background: var(--brand-blue); }
.pd-product-label > p { color: #dce8f7; }
.pd-product-label > b { margin-left: 0; }
.pd-hero h1 { max-width: 920px; margin-inline: auto; font-size: clamp(55px,6.2vw,86px); line-height: .97; }
.pd-hero__summary { max-width: 720px; margin: 23px auto 29px; }
.pd-hero__actions, .pd-hero__trust { justify-content: center; }
.pd-hero .pd-btn--primary { color: #fff; background: var(--brand-blue); box-shadow: 0 14px 40px rgba(23,107,255,.3); }
.pd-hero__trust i { color: #6b9fff; }

.pd-hero__media {
    width: min(1030px, 100%);
    margin: 58px auto 0;
    padding: 0;
    overflow: visible;
    background: #0b1932;
    border: 1px solid rgba(103,151,224,.22);
    border-radius: 22px;
    box-shadow: 0 42px 105px rgba(0,0,0,.43), 0 0 0 8px rgba(255,255,255,.018);
    transform: none !important;
}

.pd-preview-bar { height: 50px; padding: 0 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(5,14,30,.95); border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 22px 22px 0 0; }
.pd-preview-bar > div { display: flex; gap: 5px; }.pd-preview-bar > div span { width: 7px; height: 7px; background: #31445f; border-radius: 50%; }.pd-preview-bar p { margin: 0; color: #91a3b9; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.pd-preview-bar p i { margin-right: 6px; color: #6e9fff; }.pd-preview-bar b { justify-self: end; color: #57d999; font-size: 8px; }.pd-preview-bar b i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: #46d68c; border-radius: 50%; }
.pd-hero__media img { border-radius: 0 0 20px 20px; }
.pd-hero__media figcaption { right: 18px; bottom: 18px; left: 18px; }
.pd-hero__media figcaption span i { color: #6d9fff; }
.pd-media-badge { top: 78px; right: -28px; }
.pd-media-badge > i { color: #fff; background: var(--brand-blue); }
.pd-benefits { width: min(1030px,100%); margin: 30px auto 0; background: rgba(9,24,48,.78); border-color: rgba(101,148,220,.16); }
.pd-benefits__context > i { color: #fff; background: var(--brand-blue); }

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
    .tk-hero__grid { grid-template-columns: 1fr; }
    .tk-hero__visual { width: min(600px,100%); min-width: 0; margin: auto; }
    .tk-hero__copy { text-align: center; }
    .tk-hero__copy .tk-eyebrow, .tk-hero__actions { justify-content: center; }
    .tk-hero-kicker, .tk-hero__lead { margin-inline: auto; }
    .pd-hero__copy { text-align: center; }
}

@media (max-width: 760px) {
    .tk-hero { min-height: auto; padding-top: 112px; }
    .tk-hero h1 { font-size: 51px; }
    .tk-hero__visual { height: 480px; }
    .tk-hero-canvas { inset: 5px; }
    .tk-ecosystem-node { min-width: 155px; padding: 9px; }
    .tk-ecosystem-node--web { left: 12px; }.tk-ecosystem-node--ai { right: 12px; }.tk-ecosystem-node--mobile { left: 10px; }.tk-ecosystem-node--cloud { right: 12px; }
    .tk-hero-float--quality { right: -4px; }.tk-hero-float--growth { left: -4px; }

    .tp-hero { min-height: 900px; padding-top: 118px; }
    .tp-hero h1 { font-size: 55px; }
    .tp-ai-stage { height: 420px; }
    .tp-channel-node { min-width: 165px; }.tp-channel-node--chat { left: 18px; }.tp-channel-node--voice { right: 18px; }.tp-channel-node--wa { left: 17px; }.tp-channel-node--lead { right: 18px; }

    .pd-hero h1 { font-size: 56px; }
    .pd-media-badge { right: -5px; }
}

@media (max-width: 590px) {
    .tk-hero h1 { font-size: 46px; }
    .tk-hero__visual { height: 410px; }
    .tk-hero-canvas__top { grid-template-columns: 1fr auto; }.tk-hero-canvas__top p { display: none; }
    .tk-ecosystem { height: 330px; }
    .tk-ecosystem__halo i:nth-child(3) { width: 320px; height: 320px; }
    .tk-ecosystem__core { width: 120px; height: 120px; }
    .tk-ecosystem-node { min-width: 139px; }.tk-ecosystem-node > span { flex-basis: 30px; width: 30px; height: 30px; }.tk-ecosystem-node small { display: none; }
    .tk-ecosystem-node--web { top: 25px; left: 5px; }.tk-ecosystem-node--ai { top: 37px; right: 5px; }.tk-ecosystem-node--mobile { left: 5px; bottom: 27px; }.tk-ecosystem-node--cloud { right: 5px; bottom: 18px; }
    .tk-hero-canvas__bottom { grid-template-columns: 1fr 90px; }.tk-hero-canvas__bottom > b { display: none; }
    .tk-hero-float { display: none; }

    .tp-hero { min-height: auto; padding: 110px 0 75px; }
    .tp-suite-pill b { display: none; }
    .tp-hero h1 { font-size: 47px; }
    .tp-proof-row { align-items: center; text-align: center; }
    .tp-ai-stage { height: 385px; margin-top: 45px; overflow: hidden; }
    .tp-ai-stage__rings span:nth-child(3) { width: 340px; height: 340px; }
    .tp-ai-stage__core { width: 122px; height: 122px; }
    .tp-channel-node { min-width: 138px; padding: 8px; }.tp-channel-node > span { width: 30px; height: 30px; }.tp-channel-node small { display: none; }.tp-channel-node--chat { top: 32px; left: 5px; }.tp-channel-node--voice { top: 44px; right: 5px; }.tp-channel-node--wa { left: 5px; bottom: 70px; }.tp-channel-node--lead { right: 5px; bottom: 70px; }
    .tp-ai-stage__footer { padding: 0 10px; gap: 8px; }.tp-ai-stage__footer > i { display: none; }.tp-ai-stage__footer > div { flex: 1; }.tp-ai-stage__footer strong { font-size: 7px; }

    .pd-hero { padding: 100px 0 65px; }
    .pd-product-label { flex-wrap: wrap; }.pd-product-label > b { width: 100%; }
    .pd-hero h1 { font-size: 47px; }
    .pd-preview-bar { grid-template-columns: 1fr auto; }.pd-preview-bar p { display: none; }
    .pd-hero__media figcaption p { display: none; }
    .pd-media-badge { display: none; }
}