:root {
--primary-blue: #0066FF;
--primary-dark: #0052CC;
--navy-dark: #0A1128;
--navy-medium: #101B3B;
--navy-card: #162447;
--text-dark: #0F172A;
--text-muted: #64748B;
--text-light: #94A3B8;
--bg-light-blue: #F0F5FF;
--bg-gray-blue: #F8FAFC;
--border-color: #E2E8F0;
--border-hover: #CBD5E1;
--card-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.08);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 24px;
--pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22384%22%20height%3D%2264%22%20viewBox%3D%220%200%20384%2064%22%3E%20%20%20%3C%21--%20palette%3A%20navy%20%2310306E%2C%20blue%20%232E6DB4%2C%20light%20%238FC1E6%2C%20white%20%23FFFFFF%2C%20black%20%23101418%20--%3E%20%20%20%3Cg%3E%20%20%20%20%20%3C%21--%20tile0%3A%20diagonal%20split%20diamond%20--%3E%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%220%2C0%2064%2C0%200%2C64%22%20fill%3D%22%238FC1E6%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%2264%2C64%2064%2C0%200%2C64%22%20fill%3D%22%232E6DB4%22%2F%3E%20%20%20%20%20%3C%21--%20tile1%3A%20leaf%20motif%20on%20white%20--%3E%20%20%20%20%20%3Crect%20x%3D%2264%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%20%20%20%20%3Cg%20transform%3D%22translate%2896%2C33%29%22%20fill%3D%22%2310306E%22%3E%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C4%20C%20-13%2C2%20-18%2C-10%20-15%2C-20%20C%20-5%2C-16%20-1%2C-6%200%2C4%20Z%22%2F%3E%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C4%20C%2013%2C2%2018%2C-10%2015%2C-20%20C%205%2C-16%201%2C-6%200%2C4%20Z%22%2F%3E%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C10%20C%20-10%2C10%20-15%2C20%20-13%2C27%20C%20-5%2C24%20-1%2C17%200%2C10%20Z%22%2F%3E%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C10%20C%2010%2C10%2015%2C20%2013%2C27%20C%205%2C24%201%2C17%200%2C10%20Z%22%2F%3E%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%3C%21--%20tile2%3A%20U%20arc%20on%20blue%20--%3E%20%20%20%20%20%3Crect%20x%3D%22128%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%232E6DB4%22%2F%3E%20%20%20%20%20%3Cpath%20d%3D%22M128%2C0%20A32%2C32%200%200%200%20192%2C0%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%20%20%20%20%3C%21--%20tile3%3A%20corner%20triangles%20diamond%20on%20light%20--%3E%20%20%20%20%20%3Crect%20x%3D%22192%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%238FC1E6%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22192%2C0%20224%2C0%20192%2C32%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22256%2C0%20224%2C0%20256%2C32%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22192%2C64%20224%2C64%20192%2C32%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22256%2C64%20224%2C64%20256%2C32%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%20%20%3C%21--%20tile4%3A%20black%20diamond%20--%3E%20%20%20%20%20%3Crect%20x%3D%22256%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22288%2C6%20314%2C32%20288%2C58%20262%2C32%22%20fill%3D%22%23101418%22%2F%3E%20%20%20%20%20%3C%21--%20tile5%3A%20split%20triangle%20navy%2Flight%20--%3E%20%20%20%20%20%3Crect%20x%3D%22320%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%232E6DB4%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22320%2C0%20384%2C0%20384%2C64%22%20fill%3D%22%238FC1E6%22%2F%3E%20%20%20%20%20%3Cpolygon%20points%3D%22320%2C0%20320%2C64%20384%2C64%22%20fill%3D%22%2310306E%22%2F%3E%20%20%20%3C%2Fg%3E%20%3C%2Fsvg%3E%20");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-dark);
background-color: #FFFFFF;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
} .container {
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
} .badge {
display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary-blue);
margin-bottom: 12px;
}
.badge-light {
color: #60A5FA;
}
.section-title {
font-size: 40px;
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.025em;
color: var(--text-dark);
margin-bottom: 16px;
}
.section-title.light {
color: #FFFFFF;
}
.section-desc {
font-size: 16px;
color: var(--text-muted);
max-width: 640px;
margin: 0 auto 48px auto;
}
.section-desc.light {
color: #94A3B8;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
cursor: pointer;
border: none;
gap: 8px;
}
.btn-primary {
background-color: var(--primary-blue);
color: #FFFFFF;
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-1px);
}
.btn-dark {
background-color: var(--navy-dark);
color: #FFFFFF;
}
.btn-dark:hover {
background-color: #1A264D;
transform: translateY(-1px);
}
.btn-outline {
background-color: transparent;
color: var(--text-dark);
border: 1px solid var(--border-color);
}
.btn-outline:hover {
background-color: #F1F5F9;
}
.btn-white {
background-color: #FFFFFF;
color: var(--navy-dark);
}
.btn-white:hover {
background-color: #F8FAFC;
} header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid #F1F5F9;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 24px;
font-weight: 800;
color: var(--navy-dark);
letter-spacing: -0.03em;
}
.logo-dot {
width: 8px;
height: 8px;
background-color: var(--primary-blue);
border-radius: 50%;
display: inline-block;
}
.logo-img { height: 30px; width: auto; display: block; }
.footer-logo { display: inline-block; margin-bottom: 4px; }
.logo-img-white { height: 46px; width: auto; display: block; }
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--primary-blue);
} .hero {
padding: 90px 0 108px 0;
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
}
.hero-content h1 {
font-size: 58px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.035em;
margin-top: 14px;
margin-bottom: 24px;
color: var(--navy-dark);
}
.hero-content h1 span {
color: var(--primary-blue);
}
.hero-content p {
font-size: 17px;
color: var(--text-muted);
margin-bottom: 36px;
max-width: 520px;
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 16px;
margin-bottom: 60px;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-top: 32px;
border-top: 1px solid var(--border-color);
}
.stat-item .num {
font-size: 28px;
font-weight: 800;
color: var(--navy-dark);
line-height: 1;
margin-bottom: 6px;
}
.stat-item .label {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
} .hero-card {
background: #FFFFFF;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
box-shadow: 0 20px 40px rgba(0,0,0,0.06);
overflow: hidden;
}
.hero-card-header {
background: linear-gradient(135deg, var(--primary-blue), #0044BB);
padding: 24px;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
}
.hero-card-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 16px;
}
.hero-card-badge {
background: rgba(255,255,255,0.2);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.product-list-preview {
padding: 16px 24px;
}
.preview-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #F1F5F9;
font-size: 14px;
}
.preview-row:last-child {
border-bottom: none;
}
.preview-name {
font-weight: 700;
color: var(--navy-dark);
display: flex;
align-items: center;
gap: 10px;
}
.preview-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-blue);
}
.preview-cat {
font-size: 12px;
color: var(--text-muted);
background: #F1F5F9;
padding: 4px 10px;
border-radius: 12px;
}
.hero-card-footer {
background: #F8FAFC;
padding: 16px 24px;
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-muted);
border-top: 1px solid var(--border-color);
} .hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero-glow {
position: absolute;
width: 118%;
height: 90%;
left: -6%;
top: 5%;
background: radial-gradient(ellipse at center, #DCE9FF 0%, rgba(238,244,255,0) 68%);
z-index: 0;
}
.hero-line {
position: relative;
z-index: 1;
width: 128%;
max-width: 128%;
height: auto;
margin-right: -28%;
filter: drop-shadow(0 24px 30px rgba(10,23,48,0.14));
} .pattern-band {
height: 54px;
width: 100%;
background-image: var(--pattern);
background-repeat: repeat-x;
background-size: auto 54px;
}
.pattern-band.thin { height: 40px; background-size: auto 40px; } .industry-bar {
background: #F8FAFC;
padding: 24px 0;
border-y: 1px solid var(--border-color);
}
.industry-flex {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.industry-item {
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
color: #94A3B8;
text-transform: uppercase;
} .feature { padding: 110px 0; background: #FFFFFF; }
.feature-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 64px;
align-items: center;
}
.feature-visual { position: relative; display: flex; justify-content: center; }
.feature-visual::before {
content: '';
position: absolute;
width: 440px; height: 440px; border-radius: 50%;
background: radial-gradient(circle, #E7F0FF 0%, rgba(231,240,255,0) 70%);
top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.feature-visual img {
position: relative;
height: 540px; width: auto;
filter: drop-shadow(0 32px 40px rgba(10,23,48,0.22));
}
.feature-content h2 {
font-size: 40px; font-weight: 800; letter-spacing: -0.02em;
line-height: 1.15; margin: 14px 0 18px; color: var(--navy-dark);
}
.feature-content .lead { font-size: 17px; color: var(--text-muted); max-width: 520px; margin-bottom: 30px; }
.feature-list { list-style: none; display: grid; gap: 15px; margin-bottom: 32px; }
.feature-list li { display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: #1E293B; font-weight: 500; }
.feature-list .tick {
width: 26px; height: 26px; flex: none; border-radius: 50%;
background: #E7F0FF; color: var(--primary-blue);
display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.trust-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-badge {
display: flex; align-items: center; gap: 9px;
background: #F5F8FD; border: 1px solid var(--border-color);
border-radius: 100px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: #334155;
}
.trust-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-blue); } .philosophy {
background-color: var(--navy-dark);
color: #FFFFFF;
padding: 100px 0;
position: relative;
text-align: center;
}
.philosophy-content {
max-width: 860px;
margin: 0 auto;
}
.philosophy h2 {
font-size: 40px;
font-weight: 800;
line-height: 1.25;
margin-bottom: 28px;
letter-spacing: -0.02em;
}
.philosophy p {
font-size: 20px;
color: #CBD5E1;
line-height: 1.6;
font-weight: 400;
}
.philosophy p strong {
color: #FFFFFF;
font-weight: 700;
}
.philosophy p span {
color: #60A5FA;
font-weight: 700;
} .values {
padding: 110px 0;
text-align: center;
background: #FFFFFF;
}
.values-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 50px;
}
.value-card {
background: linear-gradient(180deg, #FFFFFF, #FBFCFE);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 34px 28px;
text-align: left;
transition: all 0.3s ease;
}
.value-card:hover {
border-color: transparent;
box-shadow: 0 24px 50px -24px rgba(10,23,48,0.35);
transform: translateY(-6px);
}
.icon-box {
width: 56px;
height: 56px;
border-radius: 15px;
background: linear-gradient(135deg, #0F6BFF, #0047C4);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
box-shadow: 0 10px 22px -8px rgba(0,102,255,0.55);
}
.value-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
color: var(--navy-dark);
}
.value-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
} .measurable {
padding: 0 0 100px 0;
text-align: center;
background: #FFFFFF;
}
.measurable-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.measurable-card {
background: #F8FAFC;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 36px 32px;
text-align: left;
display: flex;
gap: 20px;
align-items: flex-start;
}
.measurable-card .icon-box {
flex-shrink: 0;
margin-bottom: 0;
}
.measurable-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--navy-dark);
}
.measurable-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
} .results { padding: 132px 0; background: #0B1120; color:#fff; text-align: center; position: relative; overflow: hidden; }
.results::before { content:''; position:absolute; width:1000px; height:1000px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,0.20), transparent 62%); top:-560px; left:50%; transform:translateX(-50%); pointer-events:none; }
.results .container { position: relative; z-index: 1; }
.results .badge { color:#7FB0FF; }
.results .section-title { color:#FFFFFF; }
.results .section-desc { color:#9AA7BE; }
.sm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; text-align: left; }
.sm-card { background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.09); border-radius:18px; padding:26px 26px 20px; transition: all .35s ease; }
.sm-card:hover { background:rgba(255,255,255,0.065); transform: translateY(-5px); border-color:rgba(255,255,255,0.18); }
.sm-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.sm-name { font-weight:700; color:#FFFFFF; font-size:14.5px; }
.sm-limit { font-size:11.5px; color:#7C8AA3; white-space:nowrap; }
.sm-vals { display:flex; align-items:baseline; gap:9px; margin:16px 0 4px; }
.sm-before { font-size:14px; color:#63708A; text-decoration:line-through; }
.sm-arrow { color:#4C5A74; font-weight:700; }
.sm-after { font-size:26px; font-weight:800; color:#FFFFFF; letter-spacing:-0.02em; }
.sm-unit { font-size:12px; color:#8492A9; font-weight:600; }
.sm-pass { font-size:11px; font-weight:700; color:#4ADE80; margin-left:auto; align-self:center; letter-spacing:0.3px; }
.sm-chart { margin-top:12px; }
.sm-chart svg { width:100%; height:auto; display:block; }
.sm-note { margin-top:42px; font-size:13px; color:#8492A9; }
.sm-note .swb { display:inline-block; width:22px; height:11px; border-radius:3px; background:rgba(124,178,255,0.22); vertical-align:middle; margin:0 5px; }
.rchart-card { background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:30px 32px 26px; margin-top:52px; text-align:left; }
.rchart-head { margin-bottom:4px; }
.rchart-head h3 { color:#FFFFFF; font-size:18px; font-weight:700; margin-bottom:3px; }
.rchart-head span { color:#8492A9; font-size:13px; }
.rchart-card svg { width:100%; height:auto; display:block; margin-top:8px; }
.rnote { margin-top:26px; display:flex; gap:30px; flex-wrap:wrap; justify-content:center; font-size:13.5px; color:#8492A9; }
.rnote b { color:#C7D2E4; font-weight:700; }
.dbl { stroke-dasharray:1; stroke-dashoffset:1; }
.results.animate .dbl { stroke-dashoffset:0; transition: stroke-dashoffset .9s cubic-bezier(.5,0,.2,1); }
.daf { opacity:0; }
.results.animate .daf { opacity:1; transition: opacity .5s ease; }
.results.animate .dbl[data-i="0"]{transition-delay:0s}.results.animate .dbl[data-i="1"]{transition-delay:.1s}.results.animate .dbl[data-i="2"]{transition-delay:.2s}.results.animate .dbl[data-i="3"]{transition-delay:.3s}.results.animate .dbl[data-i="4"]{transition-delay:.4s}
.results.animate .daf[data-i="0"]{transition-delay:.6s}.results.animate .daf[data-i="1"]{transition-delay:.7s}.results.animate .daf[data-i="2"]{transition-delay:.8s}.results.animate .daf[data-i="3"]{transition-delay:.9s}.results.animate .daf[data-i="4"]{transition-delay:1s}
.dp { cursor:pointer; }
#rtip { position:fixed; z-index:90; pointer-events:none; background:#0E1626; border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:9px 13px; font-size:12.5px; color:#fff; opacity:0; transition:opacity .12s ease; box-shadow:0 14px 34px -14px rgba(0,0,0,.65); transform:translate(-50%,-120%); white-space:nowrap; font-family:'Plus Jakarta Sans',sans-serif; }
#rtip .t2 { color:#9AA7BE; font-size:11.5px; margin-top:2px; } .products {
padding: 100px 0;
background-color: #F4F7FC;
text-align: center;
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.product-card {
background: #FFFFFF;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
padding: 32px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.3s ease;
position: relative;
}
.product-card:hover {
box-shadow: 0 12px 32px rgba(0, 102, 255, 0.08);
border-color: #CBD5E1;
transform: translateY(-4px);
}
.product-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.product-bottle-icon {
width: 48px;
height: 64px;
background: var(--bg-light-blue);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.bottle-shape {
width: 20px;
height: 36px;
background: var(--primary-blue);
border-radius: 4px;
position: relative;
}
.bottle-shape::before {
content: '';
position: absolute;
top: -6px;
left: 5px;
width: 10px;
height: 6px;
background: #0044BB;
border-radius: 2px 2px 0 0;
}
.product-badge {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: 20px;
background: #EFF6FF;
color: var(--primary-blue);
}
.product-title {
font-size: 20px;
font-weight: 800;
color: var(--navy-dark);
margin-bottom: 4px;
}
.product-subtitle {
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 16px;
}
.product-desc {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.55;
} .products-grid .product-card {
padding: 0;
overflow: hidden;
justify-content: flex-start;
border-top: 4px solid var(--accent, #0066FF);
}
.product-media {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--tint, #EFF6FF), #FFFFFF);
border-bottom: 1px solid var(--border-color);
position: relative;
}
.product-media img {
height: 172px;
width: auto;
filter: drop-shadow(0 12px 16px rgba(10,23,48,0.20));
transition: transform 0.3s ease;
}
.products-grid .product-card:hover .product-media img { transform: translateY(-6px) scale(1.03); }
.product-content { padding: 24px 28px 30px; text-align: left; }
.product-content .product-badge {
background: var(--tint, #EFF6FF);
color: var(--accent, #0066FF);
margin-bottom: 14px;
} .product-card.cta-card {
background: var(--navy-dark);
color: #FFFFFF;
border: none;
padding: 44px 40px;
justify-content: center;
align-items: flex-start;
position: relative;
}
.product-card.cta-card h3 {
font-size: 22px;
font-weight: 800;
color: #FFFFFF;
margin-bottom: 12px;
}
.product-card.cta-card p {
color: #94A3B8;
font-size: 14px;
margin-bottom: 24px;
} .services {
padding: 110px 0;
text-align: center;
background: #F7FAFD;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.service-card {
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 40px 34px;
text-align: left;
transition: all 0.3s ease;
}
.service-card:hover {
border-color: transparent;
transform: translateY(-6px);
box-shadow: 0 26px 50px -24px rgba(10,23,48,0.35);
}
.service-num {
font-size: 40px;
font-weight: 800;
color: var(--primary-blue);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 18px;
}
.service-card h3 {
font-size: 20px;
font-weight: 800;
color: var(--navy-dark);
margin-bottom: 12px;
}
.service-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.55;
} .testimonials {
padding: 110px 0;
background: #F8FAFC;
text-align: center;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.testimonial-card {
background: #FFFFFF;
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 36px 34px;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 24px 48px -24px rgba(10,23,48,0.3);
}
.testimonial-card::before {
content: '\201C';
position: absolute;
top: 10px; right: 28px;
font-size: 92px; line-height: 1;
color: var(--primary-blue);
opacity: 0.12;
font-family: Georgia, serif;
}
.stars {
color: #0066FF;
margin-bottom: 16px;
font-size: 14px;
letter-spacing: 2px;
}
.quote-text {
font-size: 14.5px;
color: var(--text-dark);
line-height: 1.6;
margin-bottom: 24px;
font-weight: 500;
}
.author-info {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-blue);
color: #FFFFFF;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.author-name {
font-size: 14px;
font-weight: 700;
color: var(--navy-dark);
}
.author-role {
font-size: 12px;
color: var(--text-muted);
}
.testimonials-note {
margin-top: 32px;
font-size: 12px;
color: #94A3B8;
font-style: italic;
} .hub-section {
padding: 60px 0 100px 0;
}
.hub-card {
background: linear-gradient(135deg, #0A1730 0%, #0E2247 55%, #123464 100%);
border-radius: 28px;
padding: 56px;
color: #FFFFFF;
display: grid;
grid-template-columns: 0.92fr 1.08fr;
gap: 44px;
align-items: center;
box-shadow: 0 34px 70px -34px rgba(8,20,45,0.75);
position: relative;
overflow: hidden;
}
.hub-card::after {
content: '';
position: absolute;
right: -140px; top: -160px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(59,130,246,0.30), transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.hub-content { position: relative; z-index: 2; }
.hub-content h2 { font-size: 34px; font-weight: 800; margin-bottom: 16px; line-height: 1.18; }
.hub-content p { font-size: 16px; color: #AEBEDC; margin-bottom: 30px; max-width: 420px; } .hub-dash {
position: relative; z-index: 2;
display: flex;
background: #EEF3FB;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 60px -22px rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.12);
height: 306px;
margin-right: -92px;
}
.hd-side { width: 60px; background: #0E1A33; padding: 14px 10px; display: flex; flex-direction: column; gap: 9px; flex: none; }
.hd-logo { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg,#3B82F6,#0066FF); margin-bottom: 8px; }
.hd-nav { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.13); }
.hd-nav.on { background: #3B82F6; }
.hd-main { flex: 1; padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hd-head { display: flex; align-items: center; gap: 8px; }
.hd-search { flex: 1; height: 13px; border-radius: 7px; background: #DCE6F5; }
.hd-ava { width: 16px; height: 16px; border-radius: 50%; background: #C3D2EC; flex: none; }
.hd-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.hd-card { background: #FFFFFF; border-radius: 9px; padding: 9px 9px 8px; box-shadow: 0 4px 10px -6px rgba(20,40,80,0.22); }
.hd-lbl { height: 5px; width: 62%; border-radius: 3px; background: #D3DEEF; margin-bottom: 6px; }
.hd-val { height: 9px; width: 46%; border-radius: 3px; background: #26324B; margin-bottom: 7px; }
.hd-bars { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.hd-bars i { flex: 1; background: #9FC0F0; border-radius: 1.5px; }
.hd-mid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 9px; flex: 1; min-height: 0; }
.hd-chart { background: #FFFFFF; border-radius: 9px; padding: 10px; box-shadow: 0 4px 10px -6px rgba(20,40,80,0.22); display: flex; flex-direction: column; }
.hd-chart svg { width: 100%; flex: 1; margin-top: 6px; }
.hd-donut { background: #FFFFFF; border-radius: 9px; box-shadow: 0 4px 10px -6px rgba(20,40,80,0.22); display: flex; align-items: center; justify-content: center; }
.hd-ring { width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(#0066FF 0 63%, #3B82F6 63% 82%, #E2EAF6 82% 100%); position: relative; }
.hd-ring::after { content: ''; position: absolute; inset: 13px; background: #fff; border-radius: 50%; } .contact {
background-color: var(--navy-dark);
color: #FFFFFF;
padding: 100px 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.contact-left h2 {
font-size: 40px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
}
.contact-left p {
font-size: 16px;
color: #94A3B8;
margin-bottom: 40px;
max-width: 440px;
}
.contact-persons {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
}
.person-card {
background: var(--navy-medium);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
}
.person-avatar {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--primary-blue);
color: #FFFFFF;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.person-name {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
}
.person-role {
font-size: 12px;
color: #94A3B8;
margin-bottom: 4px;
}
.person-contact {
font-size: 13px;
color: #CBD5E1;
}
.general-contacts {
display: flex;
gap: 40px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.general-item .label {
font-size: 12px;
color: #64748B;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
font-weight: 700;
}
.general-item .val {
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
} .contact-form-card {
background: var(--navy-medium);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 40px;
}
.form-title {
font-size: 22px;
font-weight: 800;
margin-bottom: 8px;
}
.form-subtitle {
font-size: 14px;
color: #94A3B8;
margin-bottom: 28px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 600;
color: #CBD5E1;
margin-bottom: 8px;
}
.form-input, .form-textarea {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-sm);
padding: 14px 16px;
color: #FFFFFF;
font-size: 14px;
font-family: inherit;
transition: border-color 0.2s;
}
.form-input:focus, .form-textarea:focus {
outline: none;
border-color: var(--primary-blue);
background: rgba(255,255,255,0.08);
}
.form-textarea {
resize: vertical;
min-height: 110px;
} footer {
background-color: var(--navy-dark);
border-top: 1px solid rgba(255,255,255,0.08);
color: #94A3B8;
padding: 60px 0 40px 0;
font-size: 14px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-brand p {
margin-top: 16px;
font-size: 14px;
color: #64748B;
max-width: 300px;
line-height: 1.5;
}
.footer-title {
font-size: 13px;
font-weight: 700;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a:hover {
color: #FFFFFF;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 13px;
color: #64748B;
} @media (max-width: 1024px) {
.hero-grid, .contact-grid, .hub-card, .feature-grid {
grid-template-columns: 1fr;
}
.feature-visual { order: -1; }
.feature-visual img { height: 420px; }
.products-grid, .values-grid, .services-grid, .testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.measurable-grid {
grid-template-columns: 1fr;
}
.sm-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.products-grid, .values-grid, .services-grid, .testimonials-grid, .measurable-grid {
grid-template-columns: 1fr;
}
.hero-content h1 {
font-size: 36px;
}
.feature-visual img { height: 320px; }
.feature { padding: 70px 0; }
.nav-links {
display: none;
}
.hub-dash {
margin-right: 0;
height: 250px;
}
.sm-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
} html,body{overflow-x:clip;max-width:100%;} .page{display:none;}
.page.active{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html{scroll-behavior:smooth;} .nav-right{display:flex;align-items:center;gap:12px;}
.nav-right .btn{white-space:nowrap;}
.btn-login-nav{background:#fff;color:var(--primary-blue);border:1.5px solid var(--border-color);white-space:nowrap;}
.btn-login-nav:hover{border-color:var(--primary-blue);} .lang-switch{position:relative;}
.lang-btn{display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--border-color);
border-radius:999px;padding:7px 12px;font-size:14px;font-weight:600;color:var(--text-dark);cursor:pointer;font-family:inherit;}
.lang-btn:hover{border-color:var(--border-hover);}
.lang-btn .flag{font-size:16px;line-height:1;}
.lang-btn .chev{font-size:10px;color:var(--text-muted);}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--border-color);
border-radius:14px;box-shadow:0 20px 50px -18px rgba(15,23,42,.35);padding:6px;min-width:186px;z-index:120;display:none;}
.lang-menu.open{display:block;}
.lang-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;
font-size:15px;font-weight:600;color:var(--navy-dark);}
.lang-item:hover{background:var(--bg-light-blue);}
.lang-item.sel{background:var(--navy-dark);color:#fff;}
.lang-item .flag{font-size:18px;} .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.hamburger span{width:24px;height:2.5px;background:var(--navy-dark);border-radius:2px;transition:.3s;}
.hamburger.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.on span:nth-child(2){opacity:0;}
.hamburger.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{position:fixed;top:64px;left:0;right:0;bottom:0;width:100%;background:#fff;z-index:200;padding:26px 22px 40px;
transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.mobile-menu.open{transform:none;}
.mobile-menu a.m-link{font-size:20px;font-weight:700;color:var(--navy-dark);padding:15px 6px;border-bottom:1px solid var(--border-color);text-decoration:none;}
.mobile-menu .m-cta{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.mobile-menu .m-cta .btn{width:100%;justify-content:center;}
.m-lang-title{margin:22px 0 8px;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--text-muted);}
.m-langs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.m-langs .lang-item{border:1px solid var(--border-color);} .crumb{padding:26px 0 0;font-size:14px;color:var(--text-muted);}
.crumb a{color:var(--primary-blue);text-decoration:none;font-weight:600;}
.crumb a:hover{text-decoration:underline;} .pd{padding:34px 0 0;}
.pd-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;margin:10px 0 30px;}
.pd-media{background:linear-gradient(180deg,var(--tint,#EFF6FF),#fff);border:1px solid var(--border-color);
border-radius:var(--radius-xl);padding:40px;display:flex;align-items:center;justify-content:center;min-height:440px;}
.pd-media img{max-width:100%;max-height:420px;width:auto;filter:drop-shadow(0 26px 40px rgba(15,23,42,.18));}
.pd-badge{display:inline-block;background:var(--tint);color:var(--accent);font-size:12.5px;font-weight:800;
letter-spacing:1px;text-transform:uppercase;padding:7px 13px;border-radius:999px;}
.pd-info h1{font-size:44px;line-height:1.05;margin:16px 0 6px;letter-spacing:-1px;}
.pd-info .pd-sub{font-size:18px;color:var(--primary-blue);font-weight:600;margin-bottom:18px;}
.pd-info .pd-desc{font-size:16.5px;line-height:1.7;color:var(--text-muted);margin-bottom:26px;}
.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px;}
.pd-cols h4{font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dark);margin-bottom:12px;}
.pd-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.pd-list li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--text-dark);}
.pd-list li .tk{color:var(--accent);font-weight:800;flex-shrink:0;}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.pd-note{font-size:13.5px;color:var(--text-light);margin-top:14px;}
.page-head{text-align:center;padding:60px 0 6px;}
.page-head .badge{margin-bottom:14px;}
.page-head h1{font-size:46px;letter-spacing:-1.4px;line-height:1.05;margin-bottom:14px;}
.page-head p{max-width:660px;margin:0 auto;font-size:18px;color:var(--text-muted);line-height:1.6;} .cta-band{background:linear-gradient(135deg,var(--primary-blue),#0044BB);color:#fff;border-radius:var(--radius-xl);
padding:46px 44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:70px 0;}
.cta-band h3{font-size:26px;margin:0 0 4px;}
.cta-band p{margin:0;opacity:.9;} .waste-hero{padding:70px 0 10px;text-align:center;}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:14px 0 10px;}
.prob-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;text-align:left;box-shadow:var(--card-shadow);}
.prob-card h3{font-size:18px;margin:6px 0 8px;}
.prob-card p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0;} .hero-line{position:relative;z-index:1;width:100%;max-width:100%;height:auto;margin:0;object-fit:contain;display:block;}
.hero-visual{max-width:100%;overflow:visible;}
@media(max-width:1024px){ .hero-visual{max-width:620px;margin:0 auto;} }
@media(max-width:1024px){
.pd-grid{grid-template-columns:1fr;gap:30px;}
.pd-media{min-height:340px;}
.prob-grid{grid-template-columns:1fr;} .nav-links{display:none;}
.nav-right .btn-login-nav{display:none;}
.nav-right .btn-primary{display:none;}
.hamburger{display:flex;}
}
@media(max-width:640px){
.pd-info h1{font-size:34px;}
.page-head h1{font-size:34px;}
.pd-cols{grid-template-columns:1fr;}
.cta-band{padding:32px 26px;}
}
@media(min-width:1025px){ .hamburger{display:none;} .mobile-menu{display:none;} }
a.product-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;cursor:pointer;}
.nav-links a.nav-active{color:var(--primary-blue);} .page{display:block!important;}
.rchart-card{overflow-x:auto;} .rchart-card svg{min-width:460px;} .pd-info .pd-sub{color:var(--accent)!important;}
.pd-media{background:radial-gradient(circle at 50% 38%, var(--tint) 0%, #fff 78%);border:1px solid var(--tint);}
.pd-info h1{color:#0F172A;}
.pd-accent-line{height:5px;width:64px;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--accent));margin:0 0 4px;}
.cta-band.brand{background:linear-gradient(135deg,var(--brand),var(--accent));}
.pd-desc{white-space:pre-line;}