: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; --amber: #ffcb5b; --red: #ff6b6b; --violet: #9b8cff; --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 17% 12%, rgba(243,196,95,.14), transparent 30%), radial-gradient(circle at 82% 16%, rgba(95,183,255,.15), transparent 32%), radial-gradient(circle at 72% 70%, 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 — HSI */ .hsi-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(8,18,34,.98) 38%, rgba(8,31,55,.84) 100%); } .hsi-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 74% 44%, rgba(243,196,95,.23), transparent 32%), radial-gradient(circle at 72% 50%, rgba(95,183,255,.20), transparent 37%), radial-gradient(circle at 19% 30%, rgba(93,255,178,.12), transparent 29%); pointer-events: none; } .hsi-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; } .hsi-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; } .hsi-title { margin: 0; color: var(--white); font-size: clamp(52px, 7vw, 102px); line-height: .91; letter-spacing: -.062em; font-weight: 850; } .hsi-title span { display: block; color: var(--gold-2); text-shadow: 0 0 36px rgba(215,161,46,.22); } .hsi-copy { max-width: 730px; color: rgba(234,243,255,.84); font-size: 19px; line-height: 1.75; margin: 30px 0 0; } .hsi-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); } .hsi-visual { position: relative; min-height: 660px; display: grid; place-items: center; } .index-field { position: absolute; z-index: 1; width: 690px; height: 460px; border: 1px solid rgba(243,196,95,.18); 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(243,196,95,.14), transparent 60%); box-shadow: inset 0 0 75px rgba(243,196,95,.06), 0 0 100px rgba(95,183,255,.08); transform: perspective(900px) rotateX(8deg); } .index-dial { position: relative; z-index: 6; width: 330px; height: 330px; border-radius: 50%; border: 1px solid rgba(243,196,95,.42); background: conic-gradient(from 225deg, rgba(93,255,178,.86) 0deg 70deg, rgba(255,203,91,.86) 70deg 125deg, rgba(255,107,107,.86) 125deg 180deg, transparent 180deg 360deg), radial-gradient(circle at center, rgba(3,9,20,.94) 0 57%, rgba(3,9,20,.35) 58% 100%); box-shadow: 0 0 80px rgba(243,196,95,.18), 0 0 140px rgba(95,183,255,.16), inset 0 0 45px rgba(243,196,95,.09); display: grid; place-items: center; } .index-dial::before { content: ""; position: absolute; inset: 34px; border-radius: 50%; background: rgba(3,9,20,.96); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 40px rgba(95,183,255,.08); } .index-dial::after { content: ""; position: absolute; width: 115px; height: 3px; background: linear-gradient(90deg, var(--gold-2), rgba(243,196,95,.12)); left: 50%; top: 50%; transform-origin: left center; transform: rotate(-28deg); box-shadow: 0 0 18px rgba(243,196,95,.55); border-radius: 999px; } .index-value { position: relative; z-index: 8; text-align: center; display: grid; gap: 6px; } .index-value strong { color: var(--white); font-size: 82px; line-height: .85; letter-spacing: -.06em; font-weight: 950; } .index-value span { color: var(--gold-2); font-size: 12px; letter-spacing: .22em; font-weight: 950; text-transform: uppercase; } .index-value small { color: rgba(234,243,255,.70); font-size: 11px; letter-spacing: .16em; font-weight: 850; text-transform: uppercase; } .score-node { position: absolute; z-index: 7; width: 72px; height: 72px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(3,9,20,.82); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); display: grid; place-items: center; text-align: center; color: var(--white); font-size: 26px; font-weight: 950; } .score-node span { display: block; color: rgba(234,243,255,.66); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; } .score-1 { left: 65px; bottom: 130px; border-color: rgba(93,255,178,.38); box-shadow: 0 18px 52px rgba(0,0,0,.28), 0 0 26px rgba(93,255,178,.12); } .score-2 { left: 135px; top: 118px; border-color: rgba(93,255,178,.30); } .score-3 { right: 135px; top: 118px; border-color: rgba(255,203,91,.36); } .score-4 { right: 65px; bottom: 130px; border-color: rgba(255,107,107,.36); } .status-panel { position: absolute; z-index: 10; right: -6px; top: 54px; width: 270px; padding: 17px; border: 1px solid rgba(243,196,95,.31); border-radius: 13px; background: rgba(3,9,20,.84); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); } .baseline-panel { position: absolute; z-index: 10; left: -12px; bottom: 86px; width: 258px; padding: 17px; border: 1px solid rgba(95,183,255,.28); border-radius: 13px; background: rgba(3,9,20,.84); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(10px); } .status-panel small, .baseline-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; } .status-panel strong { display: block; color: var(--white); font-size: 28px; line-height: 1; margin-bottom: 13px; } .status-list { display: grid; gap: 9px; } .status-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; } .status-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px rgba(93,255,178,.70); } .status-dot.amber { background: var(--amber); box-shadow: 0 0 16px rgba(255,203,91,.70); } .status-dot.red { background: var(--red); box-shadow: 0 0 16px rgba(255,107,107,.70); } .baseline-lines { display: grid; gap: 8px; } .baseline-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)); } .baseline-line:nth-child(1) { width: 96%; } .baseline-line:nth-child(2) { width: 74%; } .baseline-line:nth-child(3) { width: 88%; } .baseline-line:nth-child(4) { width: 62%; } .hsi-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; } .hsi-band-title { text-align: center; color: var(--gold-2); font-size: 11px; font-weight: 950; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 24px; } .hsi-band-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; } .hsi-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; } .hsi-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(243,196,95,.20); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), radial-gradient(circle at 25% 0%, rgba(243,196,95,.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(95,183,255,.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; } .hsi-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(243,196,95,.22); background: linear-gradient(180deg, rgba(243,196,95,.10), 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(243,196,95,.20); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), radial-gradient(circle at 20% 0%, rgba(243,196,95,.12), transparent 45%); box-shadow: var(--shadow); border-radius: 10px; padding: 38px; } .blue-panel { border-color: rgba(95,183,255,.38); background: radial-gradient(circle at 85% 16%, rgba(95,183,255,.13), 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(243,196,95,.11), 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; } .hsi-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(243,196,95,.16), transparent 34%); text-align: center; border-top: 1px solid rgba(255,255,255,.12); } .hsi-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; } .hsi-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; } .hsi-hero-grid, .split-section { grid-template-columns: 1fr; } .capability-grid { grid-template-columns: repeat(2, 1fr); } .hsi-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; } .hsi-title { font-size: 48px; } .page-tag::after { width: 70px; } .hsi-copy { font-size: 16px; } .hsi-actions { flex-direction: column; } .btn { width: 100%; } .hsi-visual { min-height: 540px; transform: scale(.74); transform-origin: center; } .status-panel, .baseline-panel { display: none; } .hsi-band-grid, .capability-grid, .use-grid, .page-footer-grid { grid-template-columns: 1fr; } .hsi-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; } } html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}