# Website styling file

/\*  
Candoo Systems Inc. — style.css  
Shared styles for index.html and sub-pages.  
\*/

:root {  
\--navy: #1B365D;  
\--red: #C41E3A;  
\--gray: #6B7280;  
\--light: #F4F6F9;  
\--white: #FFFFFF;  
\--border: #E2E6EA;  
}

/\* Base \*/  
\*, \*::before, \*::after {  
box-sizing: border-box;  
margin: 0;  
padding: 0;  
}

html {  
scroll-behavior: smooth;  
}

body {  
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;  
color: var(--navy);  
background: var(--white);  
line-height: 1.7;  
}

h1, h2, h3, h4, nav, .btn {  
font-family: 'Open Sans', sans-serif;  
}

/\* Header / nav \*/  
header {  
position: sticky;  
top: 0;  
z-index: 100;  
background: var(--white);  
border-bottom: 1px solid var(--border);  
padding: 0 2rem;  
display: flex;  
align-items: center;  
justify-content: space-between;  
height: 70px;  
box-shadow: 0 2px 8px rgba(0,0,0,0.06);  
}

.logo img {  
height: 44px;  
width: auto;  
display: block;  
}

nav {  
display: flex;  
gap: 2rem;  
list-style: none;  
}

nav a {  
text-decoration: none;  
color: var(--navy);  
font-weight: 600;  
font-size: 0.95rem;  
letter-spacing: 0.02em;  
transition: color 0.2s;  
}

nav a:hover {  
color: var(--red);  
}

/\* Hero \*/  
#hero {  
background: linear-gradient(135deg, var(--navy) 0%, #2a4a7f 100%);  
color: var(--white);  
padding: 100px 2rem 90px;  
text-align: center;  
}

#hero h1 {  
font-size: clamp(2rem, 5vw, 3.2rem);  
font-weight: 800;  
letter-spacing: -0.01em;  
margin-bottom: 1.2rem;  
line-height: 1.2;  
}

#hero h1 span {  
color: var(--red);  
}

#hero p {  
font-size: clamp(1rem, 2vw, 1.25rem);  
color: rgba(255,255,255,0.82);  
max-width: 680px;  
margin: 0 auto 2.2rem;  
}

/\* Buttons \*/  
.btn {  
display: inline-block;  
background: var(--red);  
color: var(--white);  
padding: 0.8rem 2.2rem;  
border-radius: 4px;  
font-weight: 700;  
font-size: 1rem;  
text-decoration: none;  
letter-spacing: 0.03em;  
transition: background 0.2s, transform 0.15s;  
}

.btn:hover {  
background: #a0182f;  
transform: translateY(-1px);  
}

/\* Sections \*/  
section {  
padding: 80px 2rem;  
}

section:nth-of-type(even) {  
background: var(--light);  
}

.section-inner {  
max-width: 1100px;  
margin: 0 auto;  
}

.section-label {  
font-size: 0.78rem;  
font-weight: 700;  
letter-spacing: 0.12em;  
text-transform: uppercase;  
color: var(--red);  
margin-bottom: 0.6rem;  
}

.section-title {  
font-size: clamp(1.6rem, 3vw, 2.2rem);  
font-weight: 800;  
color: var(--navy);  
margin-bottom: 1rem;  
line-height: 1.25;  
}

.section-intro {  
color: var(--gray);  
font-size: 1.05rem;  
max-width: 700px;  
margin-bottom: 3rem;  
}

/\* About \*/  
.about-grid {  
display: grid;  
grid-template-columns: 1fr 1fr;  
gap: 3rem;  
align-items: start;  
}

.about-text p {  
color: var(--gray);  
margin-bottom: 1rem;  
}

.about-stats {  
display: grid;  
grid-template-columns: 1fr 1fr;  
gap: 1.5rem;  
}

.stat-card {  
background: var(--white);  
border: 1px solid var(--border);  
border-radius: 8px;  
padding: 1.5rem;  
text-align: center;  
}

.stat-card .number {  
font-size: 2rem;  
font-weight: 800;  
color: var(--red);  
display: block;  
}

.stat-card .label {  
font-size: 0.9rem;  
color: var(--gray);  
margin-top: 0.3rem;  
}

/\* Products \*/  
.manufacturer-block {  
margin-bottom: 3.5rem;  
}

.manufacturer-block:last-child {  
margin-bottom: 0;  
}

.manufacturer-header {  
display: flex;  
align-items: center;  
gap: 1rem;  
margin-bottom: 1.2rem;  
padding-bottom: 0.8rem;  
border-bottom: 2px solid var(--border);  
}

.manufacturer-header h3 {  
font-size: 1.3rem;  
font-weight: 700;  
color: var(--navy);  
}

.manufacturer-tag {  
font-size: 0.75rem;  
font-weight: 700;  
letter-spacing: 0.08em;  
text-transform: uppercase;  
background: var(--navy);  
color: var(--white);  
padding: 0.2rem 0.7rem;  
border-radius: 20px;  
}

.product-grid {  
display: grid;  
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));  
gap: 1.5rem;  
}

/\* Product card as a link \*/  
.product-card {  
background: var(--white);  
border: 1px solid var(--border);  
border-radius: 8px;  
padding: 1.5rem;  
transition: box-shadow 0.2s, transform 0.15s;  
text-decoration: none;  
display: block;  
color: inherit;  
position: relative;  
}

.product-card:hover {  
box-shadow: 0 6px 20px rgba(27,54,93,0.12);  
transform: translateY(-3px);  
border-color: var(--red);  
}

.product-card h4 {  
font-size: 1rem;  
font-weight: 700;  
color: var(--navy);  
margin-bottom: 0.5rem;  
}

.product-card p {  
font-size: 0.92rem;  
color: var(--gray);  
line-height: 1.55;  
margin-bottom: 1rem;  
}

.product-card .card-link {  
font-size: 0.82rem;  
font-weight: 700;  
color: var(--red);  
letter-spacing: 0.04em;  
text-transform: uppercase;  
display: inline-flex;  
align-items: center;  
gap: 0.3rem;  
transition: gap 0.2s;  
font-family: 'Open Sans', sans-serif;  
}

.product-card:hover .card-link {  
gap: 0.55rem;  
}

.product-card .card-link::after {  
content: "→";  
}

/\* Markets \*/  
.markets-grid {  
display: grid;  
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  
gap: 1.5rem;  
}

.market-card {  
background: var(--white);  
border: 1px solid var(--border);  
border-radius: 8px;  
padding: 1.8rem 1.5rem;  
text-align: center;  
transition: box-shadow 0.2s;  
}

.market-card:hover {  
box-shadow: 0 4px 16px rgba(27,54,93,0.09);  
}

.market-icon {  
font-size: 2.2rem;  
margin-bottom: 0.8rem;  
display: block;  
}

.market-card h4 {  
font-size: 0.95rem;  
font-weight: 700;  
color: var(--navy);  
}

/\* Contact \*/  
#contact {  
background: var(--navy);  
color: var(--white);  
}

#contact .section-title {  
color: var(--white);  
}

#contact .section-intro {  
color: rgba(255,255,255,0.72);  
}

.contact-grid {  
display: grid;  
grid-template-columns: 1fr 1fr;  
gap: 3rem;  
align-items: start;  
}

.contact-item {  
display: flex;  
align-items: flex-start;  
gap: 1rem;  
margin-bottom: 1.8rem;  
}

.contact-icon {  
width: 42px;  
height: 42px;  
border-radius: 50%;  
background: rgba(255,255,255,0.12);  
display: flex;  
align-items: center;  
justify-content: center;  
flex-shrink: 0;  
font-size: 1.1rem;  
}

.contact-item-text strong {  
display: block;  
font-size: 0.8rem;  
font-weight: 700;  
letter-spacing: 0.08em;  
text-transform: uppercase;  
color: var(--red);  
margin-bottom: 0.2rem;  
}

.contact-item-text a,  
.contact-item-text span {  
color: rgba(255,255,255,0.88);  
font-size: 1rem;  
text-decoration: none;  
}

.contact-item-text a:hover {  
color: var(--white);  
text-decoration: underline;  
}

.social-links {  
display: flex;  
gap: 1rem;  
margin-top: 0.5rem;  
}

.social-link {  
width: 42px;  
height: 42px;  
border-radius: 50%;  
background: rgba(255,255,255,0.12);  
display: flex;  
align-items: center;  
justify-content: center;  
color: var(--white);  
text-decoration: none;  
font-size: 1rem;  
transition: background 0.2s;  
}

.social-link:hover {  
background: var(--red);  
}

.contact-info-right {  
background: rgba(255,255,255,0.07);  
border-radius: 10px;  
padding: 2rem;  
}

.contact-info-right h4 {  
font-size: 1.1rem;  
font-weight: 700;  
margin-bottom: 1rem;  
color: var(--white);  
font-family: 'Open Sans', sans-serif;  
}

.contact-info-right p {  
color: rgba(255,255,255,0.75);  
font-size: 0.97rem;  
margin-bottom: 1rem;  
}

/\* Footer \*/  
footer {  
background: #111e30;  
color: rgba(255,255,255,0.5);  
text-align: center;  
padding: 1.5rem 2rem;  
font-size: 0.85rem;  
}

footer a {  
color: rgba(255,255,255,0.6);  
text-decoration: none;  
}

footer a:hover {  
color: var(--white);  
}

/\* Responsive \*/  
@media (max-width: 768px) {  
nav {  
gap: 1.2rem;  
}

nav a {  
font-size: 0.85rem;  
}

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

.about-stats {  
grid-template-columns: 1fr 1fr;  
}  
}

@media (max-width: 520px) {  
nav {  
display: none;  
}  
}