:root { --navy-950: #030914; --navy-925: #06111f; --navy-900: #08182b; --blue: #5fb7ff; --cyan: #84d7ff; --gold: #d7a12e; --gold-2: #f3c45f; --white: #ffffff; --soft: #eaf3ff; --muted: #9db1c7; --green: #5dffb2; --violet: #9b8cff; --red: #ff6b6b; --shadow: 0 34px 90px rgba(0,0,0,.38); --max: 1240px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--navy-950); color: var(--soft); line-height: 1.55; overflow-x: hidden; text-rendering: geometricPrecision; } img, picture, source, figure, .wp-block-image, .image, .logo-image, .hero-logo, .banner-logo { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; position: absolute !important; pointer-events: none !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 18% 12%, rgba(95,183,255,.14), transparent 30%), radial-gradient(circle at 82% 16%, rgba(243,196,95,.13), transparent 32%), radial-gradient(circle at 72% 68%, rgba(93,255,178,.10), transparent 34%), linear-gradient(180deg, #030914 0%, #06111f 45%, #040b16 100%); } body::after { content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px); background-size: 60px 60px; opacity: .72; pointer-events: none; } a { color: inherit; text-decoration: none; } .container { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; } .skip-link { position: absolute; left: -999px; top: 12px; z-index: 9999; background: var(--gold-2); color: var(--navy-950); padding: 10px 14px; border-radius: 999px; font-weight: 950; } .skip-link:focus { left: 12px; } /* SAME TOP MENU AS HOMEPAGE — ONLY SHARED PART */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(3,9,20,.88); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); box-shadow: 0 16px 50px rgba(0,0,0,.22); } .nav-wrap { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .bss-logo { display: inline-flex; flex-direction: column; gap: 6px; min-width: 302px; color: var(--white); } .logo-main { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; line-height: .95; } .logo-bss { font-size: 35px; font-weight: 950; letter-spacing: -.055em; transform: scaleX(1.18); transform-origin: left center; color: var(--white); text-shadow: 0 0 22px rgba(95,183,255,.22); } .logo-company { font-size: 21px; font-weight: 500; letter-spacing: .12em; color: var(--white); } .logo-rule { position: relative; height: 2px; width: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold), var(--gold-2)); border-radius: 999px; box-shadow: 0 0 14px rgba(215,161,46,.38); } .logo-rule::before, .logo-rule::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); transform: translateY(-50%); box-shadow: 0 0 14px rgba(243,196,95,.55); } .logo-rule::before { left: 0; } .logo-rule::after { right: 0; } .logo-tagline { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .45em; color: rgba(234,243,255,.88); line-height: 1.2; } .main-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; } .main-nav > a, .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 11px; color: rgba(234,243,255,.86); border-radius: 999px; font-size: 12px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; border: 0; background: transparent; font-family: inherit; cursor: pointer; transition: .18s; } .main-nav > a:hover, .dropdown:hover .dropdown-toggle, .dropdown:focus-within .dropdown-toggle { color: var(--gold-2); background: rgba(215,161,46,.10); outline: none; } .contact-btn { border: 1px solid var(--gold) !important; color: var(--gold-2) !important; border-radius: 3px !important; padding: 11px 17px !important; margin-left: 8px; background: linear-gradient(180deg, rgba(215,161,46,.08), rgba(215,161,46,.02)) !important; } .contact-btn:hover { background: var(--gold) !important; color: var(--navy-950) !important; } .dropdown { position: relative; display: inline-flex; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 342px; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(4,13,26,.96); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s; backdrop-filter: blur(18px); } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .dropdown-menu a { display: block; padding: 11px 12px; border-radius: 10px; color: rgba(234,243,255,.86); font-size: 13px; font-weight: 750; } .dropdown-menu a:hover { background: rgba(215,161,46,.12); color: var(--gold-2); } .mobile-note { display: none; color: var(--muted); font-size: 12px; font-weight: 800; } /* CUSTOM PAGE BODY — FUSION ENGINE */ .fusion-hero { position: relative; min-height: 825px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, rgba(3,9,20,.99) 0%, rgba(5,16,33,.97) 35%, rgba(8,31,55,.84) 100%); } .fusion-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 74% 44%, rgba(95,183,255,.27), transparent 35%), radial-gradient(circle at 72% 50%, rgba(93,255,178,.11), transparent 31%), radial-gradient(circle at 20% 30%, rgba(243,196,95,.14), transparent 29%); pointer-events: none; } .fusion-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px); background-size: 72px 72px; opacity: .68; pointer-events: none; } .fusion-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .90fr 1.10fr; gap: 54px; align-items: center; min-height: 825px; padding: 78px 0; } .page-tag { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-2); font-size: 11px; font-weight: 950; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 22px; } .page-tag::after { content: ""; width: 220px; height: 2px; background: linear-gradient(90deg, var(--gold-2), transparent); border-radius: 999px; } .fusion-title { margin: 0; color: var(--white); font-size: clamp(56px, 7.3vw, 106px); line-height: .90; letter-spacing: -.062em; font-weight: 850; } .fusion-title span { display: block; color: var(--gold-2); text-shadow: 0 0 36px rgba(215,161,46,.22); } .fusion-copy { max-width: 730px; color: rgba(234,243,255,.84); font-size: 19px; line-height: 1.75; margin: 30px 0 0; } .fusion-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; min-height: 56px; padding: 16px 23px; border-radius: 4px; font-size: 13px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; transition: .18s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.28); } .btn-gold { color: var(--navy-950); background: linear-gradient(135deg, var(--gold-2), var(--gold)); } .btn-outline { color: var(--soft); border: 1px solid rgba(215,161,46,.62); background: rgba(255,255,255,.035); } .fusion-visual { position: relative; min-height: 660px; display: grid; place-items: center; } .fusion-field { position: absolute; z-index: 1; width: 690px; height: 460px; border: 1px solid rgba(95,183,255,.17); border-radius: 28px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px), radial-gradient(circle at center, rgba(95,183,255,.16), transparent 60%); box-shadow: inset 0 0 75px rgba(95,183,255,.06), 0 0 100px rgba(95,183,255,.10); transform: perspective(900px) rotateX(8deg); } .fusion-core { position: relative; z-index: 7; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(243,196,95,.56); background: radial-gradient(circle, rgba(243,196,95,.34), rgba(95,183,255,.18) 42%, rgba(3,9,20,.30) 72%); box-shadow: 0 0 85px rgba(243,196,95,.22), 0 0 140px rgba(95,183,255,.18), inset 0 0 45px rgba(243,196,95,.13); display: grid; place-items: center; text-align: center; } .fusion-core strong { color: var(--gold-2); font-size: 13px; font-weight: 950; letter-spacing: .18em; line-height: 1.35; text-transform: uppercase; } .fusion-ring { position: absolute; z-index: 3; border-radius: 50%; border: 1px solid rgba(95,183,255,.26); box-shadow: 0 0 40px rgba(95,183,255,.10); } .ring-1 { width: 430px; height: 430px; } .ring-2 { width: 545px; height: 545px; border-style: dashed; border-color: rgba(243,196,95,.24); } .ring-3 { width: 625px; height: 320px; transform: rotate(18deg); border-color: rgba(93,255,178,.22); } .ring-4 { width: 625px; height: 320px; transform: rotate(-18deg); border-color: rgba(155,140,255,.24); } .fusion-node { position: absolute; z-index: 8; width: 118px; min-height: 80px; padding: 12px; display: grid; place-items: center; text-align: center; border: 1px solid rgba(95,183,255,.28); border-radius: 14px; background: rgba(3,9,20,.80); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); color: rgba(234,243,255,.84); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; line-height: 1.35; } .fusion-node::before { content: ""; width: 16px; height: 16px; border-radius: 50%; margin-bottom: 7px; background: var(--blue); box-shadow: 0 0 18px rgba(95,183,255,.72); } .node-entry { top: 92px; left: 72px; } .node-wearable { top: 92px; right: 74px; } .node-caregiver { left: 20px; top: 288px; } .node-defense { right: 20px; top: 288px; } .node-hsi { bottom: 80px; left: 132px; } .node-gmcc { bottom: 80px; right: 132px; } .node-entry::before { background: var(--gold-2); box-shadow: 0 0 18px rgba(243,196,95,.72); } .node-wearable::before { background: var(--green); box-shadow: 0 0 18px rgba(93,255,178,.72); } .node-caregiver::before { background: var(--violet); box-shadow: 0 0 18px rgba(155,140,255,.72); } .node-defense::before { background: var(--red); box-shadow: 0 0 18px rgba(255,107,107,.72); } .fusion-line { position: absolute; z-index: 4; height: 1px; background: linear-gradient(90deg, transparent, rgba(95,183,255,.58), rgba(243,196,95,.48), transparent); box-shadow: 0 0 20px rgba(95,183,255,.18); transform-origin: center; } .line-1 { width: 370px; transform: rotate(24deg); } .line-2 { width: 370px; transform: rotate(-24deg); } .line-3 { width: 460px; transform: rotate(0deg); } .line-4 { width: 430px; transform: rotate(90deg); } .line-5 { width: 420px; transform: rotate(52deg); } .line-6 { width: 420px; transform: rotate(-52deg); } .input-panel { position: absolute; z-index: 10; right: -6px; top: 54px; width: 270px; padding: 17px; border: 1px solid rgba(95,183,255,.25); border-radius: 13px; background: rgba(3,9,20,.84); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); } .output-panel { position: absolute; z-index: 10; left: -12px; bottom: 86px; width: 258px; padding: 17px; border: 1px solid rgba(215,161,46,.34); border-radius: 13px; background: rgba(3,9,20,.84); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); } .input-panel small, .output-panel small { display: block; color: rgba(234,243,255,.60); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 950; margin-bottom: 10px; } .input-panel strong { display: block; color: var(--white); font-size: 28px; line-height: 1; margin-bottom: 13px; } .data-list { display: grid; gap: 9px; } .data-item { display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: center; color: rgba(234,243,255,.78); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .data-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(93,255,178,.70); } .data-dot.gold { background: var(--gold-2); box-shadow: 0 0 16px rgba(243,196,95,.70); } .data-dot.blue { background: var(--blue); box-shadow: 0 0 16px rgba(95,183,255,.70); } .output-lines { display: grid; gap: 8px; } .output-line { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(95,183,255,.75), rgba(93,255,178,.70), rgba(243,196,95,.62)); } .output-line:nth-child(1) { width: 96%; } .output-line:nth-child(2) { width: 74%; } .output-line:nth-child(3) { width: 88%; } .output-line:nth-child(4) { width: 62%; } .fusion-band { background: linear-gradient(180deg, rgba(8,24,43,.96), rgba(6,17,31,.98)); border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.12); padding: 28px 0 32px; } .fusion-band-title { text-align: center; color: var(--gold-2); font-size: 11px; font-weight: 950; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 24px; } .fusion-band-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; } .fusion-band-item { min-height: 74px; display: grid; place-items: center; text-align: center; color: rgba(234,243,255,.84); border-right: 1px solid rgba(215,161,46,.28); text-transform: uppercase; letter-spacing: .10em; font-size: 10.5px; font-weight: 900; padding: 10px; } .fusion-band-item:last-child { border-right: 0; } .section { position: relative; padding: 88px 0; } .section-dark { background: linear-gradient(180deg, rgba(6,17,31,.98), rgba(3,9,20,.98)); } .section-mid { background: linear-gradient(180deg, rgba(8,24,43,.98), rgba(6,17,31,.98)); } .section-head { max-width: 950px; margin: 0 auto 46px; text-align: center; } .kicker { display: inline-flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold-2); margin: 0 0 16px; font-size: 11px; font-weight: 950; letter-spacing: .25em; text-transform: uppercase; } .kicker::before, .kicker::after { content: ""; width: 78px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-2)); } .kicker::after { background: linear-gradient(90deg, var(--gold-2), transparent); } h2 { margin: 0; color: var(--white); font-size: clamp(31px, 4vw, 50px); line-height: 1.08; letter-spacing: -.035em; font-weight: 850; } .section-head p { margin: 20px auto 0; max-width: 880px; color: rgba(234,243,255,.72); font-size: 16.5px; line-height: 1.75; } .capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .capability-card { position: relative; min-height: 300px; padding: 30px 26px; border: 1px solid rgba(95,183,255,.18); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), radial-gradient(circle at 25% 0%, rgba(95,183,255,.12), transparent 44%); box-shadow: 0 18px 55px rgba(0,0,0,.22); overflow: hidden; transition: .18s; } .capability-card:hover { transform: translateY(-4px); border-color: rgba(215,161,46,.58); box-shadow: 0 28px 75px rgba(0,0,0,.34); } .capability-icon { width: 52px; height: 52px; margin-bottom: 18px; color: var(--blue); } .capability-icon svg { width: 52px; height: 52px; stroke: currentColor; fill: none; stroke-width: 1.55; } .capability-icon .gold { stroke: var(--gold-2); } .capability-icon .green { stroke: var(--green); } .capability-card h3 { margin: 0; color: var(--white); font-size: 18px; line-height: 1.22; letter-spacing: .08em; text-transform: uppercase; font-weight: 900; } .capability-card p { margin: 14px 0 0; color: rgba(234,243,255,.72); font-size: 14.5px; line-height: 1.65; } .fusion-flow { display: grid; gap: 16px; max-width: 1060px; margin: 0 auto; } .flow-step { display: grid; grid-template-columns: 90px 1fr 220px; gap: 18px; align-items: stretch; } .step-num { display: grid; place-items: center; border: 1px solid rgba(215,161,46,.55); color: var(--gold-2); background: rgba(215,161,46,.09); font-size: 24px; font-weight: 950; letter-spacing: .04em; } .step-main { padding: 25px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); } .step-main h3 { margin: 0; color: var(--white); font-size: 19px; text-transform: uppercase; letter-spacing: .07em; } .step-main p { margin: 10px 0 0; color: rgba(234,243,255,.70); line-height: 1.65; } .step-status { display: grid; place-items: center; border: 1px solid rgba(95,183,255,.18); background: linear-gradient(180deg, rgba(95,183,255,.08), rgba(255,255,255,.02)); color: rgba(234,243,255,.82); text-align: center; font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; padding: 14px; } .split-section { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: stretch; } .big-panel, .market-panel { border: 1px solid rgba(95,183,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), radial-gradient(circle at 20% 0%, rgba(95,183,255,.12), transparent 45%); box-shadow: var(--shadow); border-radius: 10px; padding: 38px; } .gold-panel { border-color: rgba(215,161,46,.50); background: radial-gradient(circle at 85% 16%, rgba(243,196,95,.12), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); } .big-panel h2, .market-panel h2 { text-transform: none; letter-spacing: -.035em; font-size: clamp(34px, 4vw, 54px); } .big-panel p, .market-panel p { color: rgba(234,243,255,.73); font-size: 16.5px; line-height: 1.78; } .tech-list { display: grid; gap: 12px; margin-top: 22px; } .tech-list a { display: flex; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); color: rgba(234,243,255,.84); font-weight: 850; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; } .tech-list a span { color: var(--gold-2); } .use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .use-card { min-height: 190px; padding: 25px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)), radial-gradient(circle at 50% 0%, rgba(95,183,255,.10), transparent 38%); border-radius: 8px; } .use-card h3 { margin: 0; color: var(--white); font-size: 16px; line-height: 1.25; text-transform: uppercase; letter-spacing: .08em; } .use-card p { margin: 12px 0 0; color: rgba(234,243,255,.68); font-size: 14px; line-height: 1.62; } .fusion-cta { position: relative; overflow: hidden; padding: 92px 0; background: linear-gradient(90deg, rgba(3,9,20,.98), rgba(8,24,43,.95)), radial-gradient(circle at 84% 44%, rgba(95,183,255,.16), transparent 34%); text-align: center; border-top: 1px solid rgba(255,255,255,.12); } .fusion-cta h2 { max-width: 1080px; margin: 0 auto; color: var(--white); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.04em; text-transform: none; font-weight: 850; } .fusion-cta p { max-width: 920px; margin: 22px auto 0; color: rgba(234,243,255,.74); font-size: 17px; line-height: 1.75; } .page-footer { background: linear-gradient(180deg, #06111f, #020711); border-top: 1px solid rgba(255,255,255,.10); padding: 45px 0 28px; } .page-footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 28px; align-items: start; } .page-footer h3 { margin: 0; color: var(--white); font-size: 18px; text-transform: uppercase; letter-spacing: .10em; } .page-footer p, .page-footer a { color: rgba(234,243,255,.66); font-size: 14px; line-height: 1.7; } .page-footer a { display: block; margin: 7px 0; } .page-footer a:hover { color: var(--gold-2); } .footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(234,243,255,.45); font-size: 12px; } @media (max-width: 1180px) { .main-nav { display: none; } .mobile-note { display: block; } .fusion-hero-grid, .split-section { grid-template-columns: 1fr; } .capability-grid { grid-template-columns: repeat(2, 1fr); } .fusion-band-grid { grid-template-columns: repeat(3, 1fr); } .flow-step { grid-template-columns: 80px 1fr; } .step-status { grid-column: 2; } .use-grid { grid-template-columns: repeat(2, 1fr); } .page-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .container { width: min(var(--max), calc(100% - 28px)); } .nav-wrap { min-height: 78px; } .bss-logo { min-width: 250px; } .logo-bss { font-size: 29px; } .logo-company { font-size: 17px; } .logo-tagline { font-size: 8px; letter-spacing: .33em; } .fusion-title { font-size: 54px; } .page-tag::after { width: 70px; } .fusion-copy { font-size: 16px; } .fusion-actions { flex-direction: column; } .btn { width: 100%; } .fusion-visual { min-height: 540px; transform: scale(.72); transform-origin: center; } .input-panel, .output-panel { display: none; } .fusion-band-grid, .capability-grid, .use-grid, .page-footer-grid { grid-template-columns: 1fr; } .fusion-band-item { border-right: 0; border-bottom: 1px solid rgba(215,161,46,.24); } .flow-step { grid-template-columns: 1fr; } .step-status { grid-column: auto; } .kicker::before, .kicker::after { width: 36px; } } body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}