/* CSS RESET & NORMALIZE */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.5;
min-height: 100vh;
background: #13192f; /* deep tech background */
color: #e9ecef;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
background-color: #202a43;
}
*, *::before, *::after {
box-sizing: inherit;
}
a {
text-decoration: none;
color: #e66400;
transition: color .2s;
}
a:hover, a:focus {
color: #FFD580;
}
ul, ol {
list-style: none;
}
img {
max-width: 100%;
display: block;
height: auto;
}
/* MONTSERRAT & ROBOTO FONTS import assumed in or @import elsewhere */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
letter-spacing: 0.06em;
color: #fff;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 24px;
}
h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 20px;
}
h3 {
font-size: 1.35rem;
font-weight: 600;
margin-bottom: 14px;
color: #e66400;
}
p, li, strong {
font-size: 1rem;
font-weight: 400;
color: #e9ecef;
}
strong {
color: #FFD580;
}
/* SPACING CONTAINERS */
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
padding: 0 18px;
display: flex;
flex-direction: column;
gap: 16px;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
background: #223357;
border-radius: 24px;
box-shadow: 0 4px 14px 0 #19203a80;
}
.section:nth-child(even) {
background: #1a2133;
}
main {
flex: 1 1 auto;
margin-top: 0;
margin-bottom: 0;
}
/* HEADER + NAVIGATION */
header {
background: #24446a;
box-shadow: 0 4px 16px 0 #10172656;
position: sticky;
top: 0;
z-index: 100;
}
header .container {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 18px;
}
header img {
height: 38px;
width: auto;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 22px;
}
header nav a {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 1.02rem;
padding: 8px 8px;
border-radius: 6px;
color: #e9ecef;
transition: background .18s, color .18s;
}
header nav a:hover, header nav a:focus {
background: #182741;
color: #FFD580;
}
.btn-primary {
padding: 10px 30px;
background: linear-gradient(93deg,#e66400 30%,#ffd580 100%);
color: #222b3b;
font-family: 'Montserrat', sans-serif;
font-size: 1.09rem;
font-weight: bold;
border-radius: 30px;
border: none;
outline: none;
cursor: pointer;
box-shadow: 0 0 10px 2px #e6640075;
transition: background .15s, color .15s, box-shadow .22s;
margin-left: 14px;
text-shadow: 0 2px 9px #ffdfa1cc;
}
.btn-primary:hover, .btn-primary:focus {
background: #fff8af;
color: #e66400;
box-shadow: 0 0 18px 2px #ffd58045;
}
/* MOBILE MENU */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 2rem;
color: #fff;
cursor: pointer;
margin-left: auto;
z-index: 201;
transition: color .18s;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
color: #ffd580;
}
.mobile-menu {
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #141d2aee;
z-index: 2100;
padding: 24px 22px 22px 22px;
transition: transform .34s cubic-bezier(.76,.09,.17,.96);
transform: translateX(-100%);
box-shadow: 4px 0 26px 2px #10172690;
}
.mobile-menu.open {
display: flex;
transform: translateX(0);
}
.mobile-menu-close {
background: none;
border: none;
color: #fff;
font-size: 2.5rem;
align-self: flex-end;
margin-bottom: 16px;
cursor: pointer;
z-index: 2111;
transition: color .15s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
color: #ffd580;
}
.mobile-nav {
display: flex;
flex-direction: column;
width: 100%;
gap: 22px;
margin-top: 32px;
}
.mobile-nav a {
font-family: 'Montserrat', sans-serif;
font-size: 1.18rem;
color: #fff;
padding: 13px 8px;
border-radius: 7px;
background: none;
transition: background .18s, color .18s;
text-align: left;
}
.mobile-nav a:hover, .mobile-nav a:focus {
background: #232e4a;
color: #e66400;
}
/* Hide desktop nav on mobile */
@media (max-width: 1024px) {
header nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
}
/* Hide mobile menu on desktop */
@media (min-width: 1025px) {
.mobile-menu {
display: none !important;
}
}
/* MAIN & SECTION LAYOUTS */
.content-wrapper {
display: flex;
flex-direction: column;
gap: 26px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
background: #161e31;
border-radius: 20px;
box-shadow: 0 8px 32px 0 #000c17a8;
margin-bottom: 20px;
transition: box-shadow .15s, transform .18s;
position: relative;
min-width: 250px;
flex: 1 1 300px;
}
.card:hover, .card:focus-within {
box-shadow: 0 16px 36px 0 #e6640050, 0 4px 14px 0 #000c17b8;
transform: translateY(-4px) scale(1.015);
}
.card-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 15px;
padding: 28px 26px 23px 26px;
}
.content-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
padding: 22px 18px;
background: #1c253d;
border-radius: 17px;
min-width: 240px;
flex: 1 1 270px;
margin-bottom: 20px;
box-shadow: 0 4px 16px 0 #1e233755;
}
.feature-item h3 {
color: #e66400;
margin-bottom: 6px;
}
ul {
margin-left: 0;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
li {
padding-left: 0;
line-height: 1.7;
}
/* TESTIMONIALS */
.testimonial-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 20px 28px;
background: #f5f5f7;
color: #223357;
border-radius: 18px;
box-shadow: 0 4px 12px #e6640015;
min-width: 200px;
margin-bottom: 22px;
border-left: 5px solid #e66400;
font-family: 'Roboto', Arial, sans-serif;
transition: box-shadow .17s, transform .16s;
}
.testimonial-card p {
color: #223357;
font-size: 1.09rem;
font-style: italic;
}
.testimonial-card span, .testimonial-card img {
color: #e66400;
font-weight: 500;
font-size: 1rem;
display: flex;
align-items: center;
gap:3px;
}
.testimonial-card:hover, .testimonial-card:focus-within {
box-shadow: 0 10px 16px 0 #e6640032;
transform: translateY(-2px) scale(1.012);
}
/* FOOTER */
footer {
background: #1a2336;
padding: 40px 0 34px 0;
font-size: 1rem;
color: #b5c9e3;
margin-top: 40px;
}
footer .container {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 44px;
}
footer nav {
display: flex;
flex-direction: column;
gap: 10px;
}
footer nav a {
color: #e9ecef;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
transition: color .16s;
}
footer nav a:hover, footer nav a:focus {
color: #ffd580;
}
footer img {
height: 37px;
}
.contact-info {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 8px;
}
.contact-info p {
color: #b5c9e3;
font-size: 1rem;
display: flex;
align-items: center;
gap: 12px;
}
footer small {
color: #7f96bb;
display: block;
margin-top: 18px;
font-size: 0.92rem;
letter-spacing: 0.03em;
}
/* COOKIE CONSENT BANNER */
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #222b3b;
color: #fff2e2;
padding: 22px 22px 18px 22px;
z-index: 4000;
box-shadow: 0 -2px 18px #10172665;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
justify-content: space-between;
transition: transform .38s cubic-bezier(.64,.04,.36,1);
transform: translateY(0);
}
.cookie-banner.hide {
transform: translateY(130%);
pointer-events: none;
opacity: 0;
}
.cookie-banner .cookie-actions {
display: flex;
gap: 14px;
}
.cookie-banner .btn-cookie {
padding: 9px 20px;
border-radius: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
border: none;
cursor: pointer;
font-size: 1rem;
transition: background .18s, color .18s, box-shadow .16s;
margin-left: 0;
}
.cookie-banner .btn-cookie.accept {
background: #e66400;
color: #fff;
box-shadow: 0 0 6px 1px #e6640036;
}
.cookie-banner .btn-cookie.accept:hover,
.cookie-banner .btn-cookie.accept:focus {
background: #ffd580;
color: #222b3b;
}
.cookie-banner .btn-cookie.reject {
background: transparent;
color: #ffd580;
border: 2px solid #ffd580;
}
.cookie-banner .btn-cookie.reject:hover, .cookie-banner .btn-cookie.reject:focus {
background: #ffd580;
color: #24446a;
}
.cookie-banner .btn-cookie.settings {
background: none;
color: #e66400;
border: 2px solid #e66400;
}
.cookie-banner .btn-cookie.settings:hover, .cookie-banner .btn-cookie.settings:focus {
background: #e66400;
color: #fff;
}
/* COOKIE CONSENT MODAL */
.cookie-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(20,28,39, 0.96);
z-index: 5000;
display: none;
align-items: center;
justify-content: center;
transition: opacity .24s;
}
.cookie-modal.open {
display: flex;
animation: fadeIn .33s cubic-bezier(.5,.2,.6,1) forwards;
}
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
.cookie-modal-content {
background: #223357;
color: #fff2e2;
padding: 32px 26px;
border-radius: 22px;
box-shadow: 0 8px 42px #141c27cc;
max-width: 415px;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 26px;
position: relative;
}
.cookie-modal-content h2 {
color: #ffd580;
font-size: 1.4rem;
margin-bottom: 12px;
}
.cookie-modal-content .cookie-categories {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 14px;
}
.cookie-modal-content .cookie-category {
justify-content: space-between;
align-items: center;
display: flex;
gap: 8px;
font-size: 1.03rem;
}
.cookie-modal-content .cookie-toggle {
appearance: none;
width: 40px;
height: 22px;
background: #353c4a;
border-radius: 99px;
position: relative;
outline: none;
cursor: pointer;
transition: background .15s;
}
.cookie-modal-content .cookie-toggle:checked {
background: #e66400;
}
.cookie-modal-content .cookie-toggle::after {
content: '';
display: block;
position: absolute;
top: 3px;
left: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
transition: left .14s;
}
.cookie-modal-content .cookie-toggle:checked::after {
left: 20px;
}
.cookie-modal-content .category-label {
color: #ffd580;
font-weight: 500;
}
.cookie-modal-content .cookie-modal-actions {
display: flex;
gap: 12px;
}
.cookie-modal-content .btn-cookie-save {
background: #e66400;
border: none;
color: #fff;
border-radius: 18px;
padding: 10px 25px;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
transition: background .16s, color .14s;
}
.cookie-modal-content .btn-cookie-save:hover, .cookie-modal-content .btn-cookie-save:focus {
background: #ffd580;
color: #24446a;
}
.cookie-modal-content .btn-cookie-cancel {
background: none;
color: #ffd580;
border: 2px solid #ffd580;
border-radius: 18px;
padding: 10px 22px;
font-size: 1rem;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
transition: background .16s, color .14s, border .14s;
}
.cookie-modal-content .btn-cookie-cancel:hover, .cookie-modal-content .btn-cookie-cancel:focus {
background: #ffd580;
color: #24446a;
}
.cookie-modal-content .cookie-modal-close {
position: absolute; top: 14px; right: 16px;
background: none;
border: none;
color: #fff;
font-size: 1.8rem;
cursor: pointer;
z-index: 9999;
transition: color .15s;
}
.cookie-modal-content .cookie-modal-close:hover, .cookie-modal-content .cookie-modal-close:focus {
color: #FFD580;
}
/* ICONS */
img[alt*='icon'], img[alt*='Icon'] {
width: 28px; height: 28px;
display: inline-block;
margin-right: 6px;
}
/* ANIMATIONS */
.btn-primary, .btn-cookie, .btn-cookie-save, .btn-cookie-cancel {
transition: background .17s, color .15s, box-shadow .15s, transform .12s;
}
.btn-primary:active, .btn-cookie:active, .btn-cookie-save:active, .btn-cookie-cancel:active {
transform: scale(0.97);
}
/* CUSTOM SCROLLBAR */
body {
scrollbar-width: thin;
scrollbar-color: #e66400 #222b3b;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background: #e66400;
border-radius: 7px;
}
body::-webkit-scrollbar-track {
background: #222b3b;
}
/* MEDIA QUERIES - MOBILE FIRST */
@media (max-width: 1024px) {
.container, footer .container {
flex-direction: column;
gap: 28px;
align-items: flex-start;
}
footer .container {
gap: 30px;
}
}
@media (max-width:768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.09rem; }
.section {
margin-bottom: 30px;
padding: 28px 8px;
border-radius: 16px;
}
.container {
padding: 0 7px;
max-width: 100vw;
gap: 12px;
}
.content-wrapper, .card-container, .content-grid {
flex-direction: column;
gap: 16px;
}
.feature-item {
min-width: 170px;
padding: 13px 8px;
gap: 12px;
border-radius: 11px;
}
.testimonial-card {
padding: 10px;
min-width: 160px;
border-left-width: 3px;
border-radius: 11px;
font-size: 0.97rem;
}
.card {
padding: 0;
}
footer {
padding: 20px 0 16px 0;
}
.cookie-banner {
flex-direction: column;
align-items: flex-start;
gap: 21px;
font-size: 0.98rem;
padding: 16px 10px 9px 10px;
}
.cookie-modal-content {
padding: 16px 8px;
border-radius: 13px;
max-width: 98vw;
gap: 16px;
}
}
@media (max-width:480px) {
h1 { font-size: 1.25rem; }
h2 { font-size: 1.08rem; }
.section {
padding: 13px 3px;
}
}
/* FLEX SPACING & ALIGNMENT - Utility Classes */
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
/* UTILITY: NO GRID or COLUMNS anywhere, all layout handled by flex! */
/* GENERAL CARD SHADOWS */
.card, .feature-item, .testimonial-card {
box-shadow: 0 4px 14px 0 #19203a70;
}
/* FOCUS STATES for ACCESSIBILITY */
a:focus, button:focus, .btn-primary:focus {
outline: 2px solid #FFD580;
outline-offset: 2px;
}
/* HERO AREA NEON ACCENT (INDEX) */
main section:first-child {
position: relative;
background:
linear-gradient(90deg, #24446a 85%, #e66400 100%) !important;
box-shadow: 0 10px 46px #e6640018;
}
main section:first-child h1 {
text-shadow: 0 3px 32px #FFD58055;
letter-spacing: 0.06em;
}
/* LISTS with MINI ICONS */
ul li img[alt*="icon"] {
margin-right: 10px;
margin-top: 0;
width: 20px; height: 20px;
filter: drop-shadow(0 0 5px #FFD58066);
}
ul li {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 12px;
}
ul li > div {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
/* ACCENTED BORDERS, NEON GLOWS */
.card, .testimonial-card {
border-left: 3px solid #e66400;
}
/* --- END OF STYLE --- */