*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

:root{
--brand-primary:#5B86C8; /* logo blue */
--brand-primary-strong:#2F5FAE;
--brand-accent:#8FB3E8;
--ink:#081A2B;
--text:rgba(255,255,255,0.92);
--muted:rgba(255,255,255,0.78);
--faint:rgba(255,255,255,0.60);
--surface:rgba(255,255,255,0.06);
--surface-2:rgba(255,255,255,0.09);
--border:rgba(255,255,255,0.14);
--shadow:0 16px 36px rgba(0,0,0,0.26);
--radius:14px;
--radius-sm:10px;
}

body{
background:#F4F9FF;
color:var(--ink);
line-height:1.6;
scroll-behavior:smooth;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}

::selection{
background:rgba(143,179,232,0.35);
}

a{
color:var(--brand-primary);
}

a:hover{
color:var(--brand-accent);
}

:focus-visible{
outline:3px solid rgba(143,179,232,0.55);
outline-offset:3px;
border-radius:8px;
}

header{
position:fixed;
top:0;
width:100%;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(10px);
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 60px;
z-index:1000;
box-shadow:0 10px 28px rgba(0,0,0,0.22);
border-bottom:1px solid rgba(8,26,43,0.08);
}

/* Prevent anchor jumps under fixed header */
section[id], .band[id]{
scroll-margin-top:92px;
}

.logo{
display:flex;
align-items:center;
gap:0;
}

.logo-inner{
background:transparent;
padding:0;
border-radius:999px;
box-shadow:none;
display:flex;
align-items:center;
justify-content:center;
border:none;
}

.logo img{
height:52px;
width:auto;
display:block;
filter:drop-shadow(0 10px 18px rgba(0,0,0,0.18));
}

nav ul{
display:flex;
list-style:none;
}

nav li{
margin-left:30px;
}

nav a{
text-decoration:none;
color:rgba(8,26,43,0.92);
font-size:15px;
letter-spacing:.3px;
position:relative;
padding-bottom:3px;
opacity:.92;
}

nav a:hover{
color:var(--brand-accent);
opacity:1;
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:var(--brand-accent);
transition:.25s ease;
}

nav a:hover::after{
width:100%;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
position:relative;
overflow:hidden;
padding-top:110px;
color:var(--text);
}

.hero-content{
max-width:980px;
margin:0 auto;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
letter-spacing:.5px;
text-shadow:0 18px 40px rgba(0,0,0,0.35);
line-height:1.08;
}

.hero p{
font-size:18px;
max-width:700px;
margin:auto;
opacity:.9;
margin-bottom:30px;
}

.btn-group{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin-top:10px;
}

.hero-slider{
position:absolute;
inset:0;
top:0;
left:0;
z-index:-2;
}

.hero-slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity 1.2s ease-in-out;
}

.hero-slide.active{
opacity:1;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(120deg,rgba(8,26,43,0.52),rgba(10,52,82,0.40));
z-index:-1;
}

.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 14px;
border-radius:999px;
background:rgba(91,134,200,0.16);
border:1px solid rgba(143,179,232,0.60);
color:var(--brand-accent);
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:14px;
}

.hero-badge-dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--brand-accent);
box-shadow:0 0 10px rgba(143,179,232,0.9);
}

.hero-controls{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:18px;
}

.hero-dots{
display:flex;
gap:10px;
}

.hero-dot{
width:10px;
height:10px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.6);
background:transparent;
cursor:pointer;
transition:background .25s ease,transform .25s ease,border-color .25s ease;
}

.hero-dot.active{
background:var(--brand-accent);
border-color:var(--brand-accent);
transform:scale(1.2);
box-shadow:0 0 18px rgba(143,179,232,0.85);
}

.hero-arrow{
background:rgba(0,0,0,0.35);
border-radius:999px;
border:1px solid rgba(255,255,255,0.3);
color:white;
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:16px;
transition:background .25s ease,transform .25s ease,border-color .25s ease;
}

.hero-arrow:hover{
background:rgba(0,0,0,0.6);
border-color:var(--brand-accent);
transform:translateY(-1px);
}

.btn{
background:var(--brand-primary-strong);
border:none;
padding:14px 28px;
border-radius:999px;
color:rgba(255,255,255,0.96);
cursor:pointer;
margin:8px;
font-size:15px;
letter-spacing:.3px;
box-shadow:0 10px 25px rgba(47,95,174,0.28);
border:1px solid rgba(255,255,255,0.06);
transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}

.btn:hover{
background:var(--brand-accent);
transform:translateY(-2px);
box-shadow:0 16px 35px rgba(143,179,232,0.45);
}

.btn:active{
transform:translateY(0);
}

.band{
padding:100px 60px;
position:relative;
}

.container{
max-width:1200px;
margin:0 auto;
padding:0 2px;
}

.band h2{
text-align:center;
margin-bottom:50px;
font-size:34px;
letter-spacing:.5px;
position:relative;
display:inline-block;
left:50%;
transform:translateX(-50%);
padding-bottom:12px;
text-shadow:0 14px 30px rgba(0,0,0,0.22);
}

.band h2::after{
content:'';
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:0;
width:70px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,var(--brand-primary-strong),var(--brand-accent));
}

.band-light{
background:
radial-gradient(circle at 20% 0%,rgba(91,134,200,0.22),transparent 55%),
linear-gradient(180deg,#EAF4FF 0%,#DCEEFF 100%);
color:var(--ink);
}

.band-dark{
background:
radial-gradient(circle at 20% 0%,rgba(91,134,200,0.22),transparent 55%),
linear-gradient(180deg,#0C2D46 0%,#081A2B 100%);
color:var(--text);
}

.band-dark a{color:var(--brand-accent);}
.band-dark a:hover{color:#ffffff;}

.band-light .pill-tag,
.band-light .hero-badge{
color:var(--brand-primary-strong);
border-color:rgba(47,95,174,0.28);
background:rgba(255,255,255,0.55);
}

.band-light .highlight-box{
background:rgba(255,255,255,0.65);
border:1px solid rgba(47,95,174,0.18);
box-shadow:0 18px 40px rgba(8,26,43,0.10);
color:rgba(8,26,43,0.92);
}

.band-light .highlight-box h3{color:var(--brand-primary-strong);}

.band-light .values{
background:rgba(255,255,255,0.60);
border:1px solid rgba(47,95,174,0.16);
box-shadow:0 16px 34px rgba(8,26,43,0.10);
color:rgba(8,26,43,0.92);
}

.band-light .values h3{color:var(--brand-primary-strong);}

.band-light .values p{
color:rgba(8,26,43,0.70);
opacity:1;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
}

.card{
background:rgba(32,92,145,0.58);
padding:35px;
border-radius:var(--radius);
transition:.3s;
border:1px solid var(--border);
box-shadow:var(--shadow);
backdrop-filter:blur(6px);
}

.card:hover{
transform:translateY(-8px);
background:rgba(40,120,185,0.62);
box-shadow:0 22px 44px rgba(0,0,0,0.36);
}

.card h3{
color:var(--brand-accent);
margin-bottom:15px;
line-height:1.25;
}

.card p{
color:var(--muted);
}

.card ul{
margin-top:14px;
padding-left:18px;
color:var(--muted);
}

.card li{
margin:8px 0;
}

.card a{
color:var(--brand-primary);
text-decoration:none;
}

.card-footer{
margin-top:22px;
display:flex;
justify-content:flex-start;
}

.card-cta{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 18px;
border-radius:999px;
background:rgba(8,26,43,0.55);
border:1px solid rgba(143,179,232,0.75);
color:var(--brand-accent);
font-size:14px;
cursor:pointer;
text-decoration:none;
box-shadow:0 10px 22px rgba(0,0,0,0.30);
transition:background .25s ease,transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.card-cta span{
font-size:16px;
}

.card-cta:hover{
background:var(--brand-accent);
color:var(--ink);
border-color:var(--brand-accent);
box-shadow:0 16px 36px rgba(143,179,232,0.50);
transform:translateY(-2px);
}

.values{
text-align:center;
padding:30px;
background:rgba(32,92,145,0.52);
border-radius:var(--radius);
border:1px solid var(--border);
box-shadow:0 16px 34px rgba(0,0,0,0.28);
backdrop-filter:blur(6px);
}

.values p{
color:var(--muted);
}

.pill-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:4px 12px;
border-radius:999px;
background:rgba(91,134,200,0.16);
border:1px solid rgba(143,179,232,0.55);
color:var(--brand-accent);
font-size:11px;
letter-spacing:.1em;
text-transform:uppercase;
margin-bottom:16px;
}

.two-column{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:40px;
align-items:center;
max-width:1100px;
margin:0 auto;
}

.two-column p{
opacity:.9;
}

.highlight-box{
background:rgba(8,26,43,0.48);
border-radius:var(--radius);
border:1px solid rgba(143,179,232,0.32);
padding:20px 24px;
box-shadow:0 16px 38px rgba(0,0,0,0.32);
backdrop-filter:blur(6px);
}

.highlight-box h3{
margin-bottom:10px;
color:var(--brand-accent);
font-size:18px;
}

.highlight-box ul{
margin-left:18px;
margin-top:8px;
opacity:.9;
}

.highlight-box li{
margin:8px 0;
}

.cta-section{
max-width:1100px;
margin:40px auto 0;
padding:28px 32px;
border-radius:var(--radius);
background:
radial-gradient(circle at top left,rgba(91,134,200,0.22),transparent 60%),
rgba(8,26,43,0.62);
border:1px solid var(--border);
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:18px;
}

.cta-section h3{
font-size:22px;
margin-bottom:4px;
}

.cta-section p{
opacity:.8;
font-size:14px;
}

.btn-secondary{
background:transparent;
border:1px solid rgba(255,255,255,0.6);
box-shadow:none;
}

.btn-secondary:hover{
background:rgba(255,255,255,0.06);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.btn-secondary-light{
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.40);
box-shadow:none;
}

.btn-secondary-light:hover{
background:rgba(255,255,255,0.22);
box-shadow:0 10px 22px rgba(0,0,0,0.22);
}

.social-links{
margin-top:18px;
display:flex;
justify-content:center;
gap:18px;
}

.social-links a{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:32px;
height:32px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.28);
color:var(--muted);
font-size:13px;
text-decoration:none;
transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}

.social-links a:hover{
background:var(--brand-accent);
color:var(--ink);
border-color:var(--brand-accent);
transform:translateY(-1px);
}

footer{
position:relative;
background:
radial-gradient(circle at 20% 0%,rgba(91,134,200,0.22),transparent 55%),
linear-gradient(180deg,#0C2D46 0%,#081A2B 70%,#081A2B 100%);
padding:40px;
text-align:center;
margin-top:0;
color:var(--muted);
border-top:1px solid rgba(143,179,232,0.22);
}

@media(max-width:1024px){
header{
padding-left:28px;
padding-right:28px;
}

.band{
padding:88px 28px;
}

.hero h1{
font-size:42px;
}
}

@media(max-width:768px){

header{
padding:12px 18px;
flex-wrap:nowrap;
gap:12px;
}

nav{
flex:0 0 auto;
}

nav ul{
display:none;
flex-direction:column;
position:absolute;
top:64px;
left:12px;
right:12px;
background:rgba(255,255,255,0.96);
width:auto;
border-radius:14px;
border:1px solid rgba(8,26,43,0.10);
box-shadow:0 18px 45px rgba(0,0,0,0.18);
padding:10px 8px;
}

nav ul.show{
display:flex;
}

nav li{
margin:10px 12px;
}

nav a{
color:rgba(8,26,43,0.92);
font-size:16px;
padding:10px 6px;
display:block;
}

.menu-toggle{
display:block;
margin-left:auto;
}

.logo img{
height:46px;
}

.hero{
padding:24px 18px;
padding-top:92px;
min-height:520px;
height:auto;
}

.hero h1{
font-size:32px;
}

.hero p{
font-size:16px;
}

.hero-controls{
bottom:18px;
gap:14px;
}

.hero-arrow{
width:38px;
height:38px;
}

.band{
padding:80px 30px;
}

.grid{
gap:18px;
}

.card, .values{
padding:22px;
}

.card-cta{
width:100%;
justify-content:center;
}

.two-column{
grid-template-columns:1fr;
}

.cta-section{
padding:22px 20px;
}

}

@media(max-width:480px){
header{
padding:10px 14px;
}

.logo img{
height:42px;
}

.hero{
min-height:480px;
}

.hero h1{
font-size:28px;
}

.hero-controls{
bottom:14px;
}

.band{
padding:64px 16px;
}

.band h2{
font-size:28px;
margin-bottom:34px;
}

.cta-section{
padding:18px 16px;
}
}