*{margin:0;padding:0;box-sizing:border-box}

:root{
--green:#0FA36B;
--blue:#1565C0;
--navy:#0A1B2E;
--bg:#F4F7FA;
--soft:#EDF5FF;
--card:#FFFFFF;
--text:#1F2937;
--light:#64748B;
--border:#E2E8F0;
--accent:#4FD1C5;
}

html{scroll-behavior:smooth}

body{
font-family:'Inter',Arial,sans-serif;
background:var(--bg);
overflow-x:hidden;
color:var(--text);
line-height:1.6;
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* NAVBAR */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:88px;
padding:0 7%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,.94);
backdrop-filter:blur(20px);
border-bottom:1px solid rgba(0,0,0,.06);
z-index:1000;
}

.brand{
display:flex;
align-items:center;
gap:14px;
color:var(--text);
}

.brand-logo{
width:52px;
height:52px;
object-fit:contain;
}

.brand strong{
display:block;
font-size:18px;
font-weight:900;
letter-spacing:2px;
color:var(--navy);
}

.brand small{
font-size:12px;
color:var(--light);
}

.nav-links{
display:flex;
gap:35px;
font-size:14px;
font-weight:700;
color:var(--text);
}

.nav-links a:hover{color:var(--green)}

.menu-btn{
display:none;
background:linear-gradient(90deg,var(--green),var(--blue));
color:white;
border:none;
border-radius:10px;
padding:10px 14px;
font-size:22px;
cursor:pointer;
}

.mobile-menu{
display:none;
position:fixed;
top:88px;
left:0;
width:100%;
padding:20px 7%;
background:white;
z-index:999;
box-shadow:0 25px 60px rgba(0,0,0,.10);
}

.mobile-menu.show{display:block}

.mobile-menu a{
display:block;
padding:16px 0;
border-bottom:1px solid var(--border);
font-weight:700;
color:var(--text);
}

/* INTRO */

#welcomeIntro{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:
radial-gradient(circle at top right,rgba(15,163,107,.20),transparent 30%),
radial-gradient(circle at bottom left,rgba(21,101,192,.18),transparent 32%),
linear-gradient(135deg,#F8FFFD,#EDF5FF,#F4F7FA);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
transition:transform 1.4s ease,opacity 1.4s ease;
}

#welcomeIntro.hideIntro{
opacity:0!important;
transform:translateY(-100%)!important;
pointer-events:none!important;
}

.welcome-content{
position:relative;
z-index:5;
text-align:center;
}

.intro-logo{
width:130px;
margin:auto;
animation:logoPulse 2.5s infinite;
filter:drop-shadow(0 0 24px rgba(15,163,107,.35));
}

@keyframes logoPulse{
0%{transform:scale(1)}
50%{transform:scale(1.07)}
100%{transform:scale(1)}
}

.welcome-content p{
font-size:13px;
letter-spacing:8px;
font-weight:900;
margin-top:28px;
color:var(--green);
}

.welcome-content h1{
font-size:88px;
font-weight:900;
letter-spacing:10px;
margin-top:10px;
color:var(--navy);
}

.welcome-content h2{
font-size:28px;
font-weight:600;
color:var(--blue);
margin-top:12px;
}

.welcome-content span{
display:block;
margin-top:28px;
color:var(--light);
font-size:16px;
}

/* HERO SLIDER */

.hero-slider{
height:100vh;
min-height:820px;
padding-top:88px;
overflow:hidden;
position:relative;
background:var(--bg);
}

.slide-track{
display:flex;
height:100%;
transition:transform 1s cubic-bezier(.77,0,.175,1);
will-change:transform;
}

.slide{
flex:0 0 100%;
min-width:100%;
height:calc(100vh - 88px);
min-height:730px;
display:grid;
grid-template-columns:1fr 520px;
gap:60px;
align-items:center;
padding:60px 7% 130px;
color:var(--text);
background:
radial-gradient(circle at top right,rgba(15,163,107,.14),transparent 30%),
radial-gradient(circle at bottom left,rgba(21,101,192,.12),transparent 35%),
linear-gradient(135deg,#F8FFFD,#EDF5FF,#F4F7FA);
}

.slide-two{
background:
radial-gradient(circle at top left,rgba(21,101,192,.13),transparent 30%),
radial-gradient(circle at bottom right,rgba(15,163,107,.10),transparent 35%),
linear-gradient(135deg,#F8FAFF,#EEF7FF,#F7FFFB);
}

.slide-three{
background:
radial-gradient(circle at bottom right,rgba(15,163,107,.13),transparent 30%),
linear-gradient(135deg,#F4F7FA,#F8FFFD,#EDF5FF);
}

.slide-content{max-width:720px}

.label{
font-size:13px;
font-weight:900;
letter-spacing:4px;
text-transform:uppercase;
color:var(--green);
}

.slide-content h1{
font-size:58px;
line-height:1.04;
font-weight:900;
letter-spacing:-2.5px;
margin:22px 0;
color:var(--navy);
}

.slide-content p{
font-size:19px;
line-height:1.8;
max-width:640px;
color:var(--light);
margin-bottom:26px;
}

.slide-points{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-bottom:34px;
}

.slide-points span{
padding:10px 14px;
border-radius:999px;
background:white;
border:1px solid var(--border);
color:var(--text);
font-size:13px;
font-weight:700;
box-shadow:0 8px 24px rgba(15,23,42,.04);
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.btn{
padding:17px 32px;
border-radius:999px;
font-weight:800;
display:inline-block;
transition:.35s;
}

.btn:hover{transform:translateY(-4px)}

.btn-teal{
background:linear-gradient(90deg,var(--green),var(--blue));
color:white;
box-shadow:0 18px 45px rgba(15,163,107,.22);
}

.btn-glass{
background:white;
border:1px solid var(--border);
color:var(--navy);
box-shadow:0 12px 36px rgba(15,23,42,.06);
}

/* SLIDE PANEL */

.slide-panel{
width:100%;
max-width:520px;
justify-self:end;
padding:40px;
background:white;
border:1px solid rgba(0,0,0,.06);
border-radius:35px;
box-shadow:0 40px 100px rgba(15,23,42,.10);
}

.slide-panel span{
font-size:12px;
font-weight:900;
letter-spacing:4px;
color:var(--green);
}

.slide-panel h3{
font-size:38px;
line-height:1.15;
margin:18px 0;
font-weight:900;
color:var(--navy);
}

.slide-panel p{
color:var(--light);
line-height:1.8;
}

.panel-list{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:28px;
}

.panel-list div{
padding:18px;
border-radius:18px;
background:var(--bg);
text-align:center;
border:1px solid var(--border);
}

.panel-list b{
display:block;
font-size:26px;
color:var(--blue);
}

.panel-list small{
color:var(--light);
font-size:12px;
}

.panel-flow{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:28px;
}

.panel-flow span{
letter-spacing:0;
font-size:13px;
padding:10px 14px;
border-radius:999px;
background:var(--bg);
color:var(--text);
border:1px solid var(--border);
}

.panel-flow i{
color:var(--green);
font-style:normal;
font-weight:900;
}

.panel-quote{
margin-top:28px;
padding:24px;
border-left:4px solid var(--green);
background:var(--bg);
border-radius:18px;
color:var(--text);
font-weight:700;
}

/* DOTS */

.slider-nav{
position:absolute;
bottom:38px;
left:7%;
display:flex;
gap:12px;
z-index:100;
}

.dot{
width:14px;
height:14px;
border-radius:50%;
background:rgba(10,27,46,.22);
cursor:pointer;
}

.active-dot{
background:linear-gradient(90deg,var(--green),var(--blue));
width:42px;
border-radius:30px;
}

/* WHO WE ARE */

.who-we{
padding:120px 7%;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
background:#ffffff;
}

.who-left h2{
font-size:58px;
line-height:1.05;
letter-spacing:-2px;
margin:20px 0;
color:var(--navy);
}

.intro-text{
font-size:19px;
line-height:1.9;
color:var(--light);
margin-bottom:40px;
}

.feature-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}

.feature-box{
display:flex;
gap:18px;
padding:24px;
border-radius:24px;
background:#fff;
border:1px solid var(--border);
box-shadow:0 20px 60px rgba(15,23,42,.05);
transition:.35s;
}

.feature-box:hover{transform:translateY(-6px)}

.icon{
width:55px;
height:55px;
border-radius:50%;
background:linear-gradient(90deg,var(--green),var(--blue));
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:white;
font-weight:bold;
flex-shrink:0;
}

.feature-box h4{
margin-bottom:8px;
font-size:20px;
color:var(--navy);
}

.feature-box p{
font-size:15px;
line-height:1.7;
color:var(--light);
}

.who-right{position:relative}

.who-right img{
width:100%;
height:620px;
object-fit:cover;
border-radius:35px;
box-shadow:0 40px 90px rgba(15,23,42,.12);
}

.floating-card{
position:absolute;
padding:25px;
background:white;
border-radius:24px;
box-shadow:0 20px 60px rgba(0,0,0,.1);
text-align:center;
border:1px solid var(--border);
}

.card1{
top:40px;
left:-30px;
}

.card2{
bottom:50px;
right:-20px;
}

.floating-card h3{
font-size:38px;
color:var(--green);
}

.floating-card p{color:var(--light)}

/* OTHER CONTENT */

.corporate-statement{
padding:120px 7%;
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
background:var(--navy);
color:white;
}

.corporate-statement h2{
font-size:56px;
line-height:1.05;
letter-spacing:-2px;
margin-top:20px;
}

.corporate-statement p{
font-size:20px;
line-height:1.8;
color:#CBD5E1;
}

.numbers{
padding:0 7% 120px;
background:var(--navy);
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}

.numbers div{
padding:40px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
}

.numbers h3{
font-size:50px;
color:var(--accent);
}

.numbers p{
margin-top:10px;
color:#CBD5E1;
}

.section{
padding:120px 7%;
}

.section h2,
.quality-section h2,
.cta h2{
font-size:56px;
line-height:1.05;
letter-spacing:-2px;
margin-top:20px;
}

.dark-section{
background:var(--bg);
color:var(--text);
}

.dark-section h2{color:var(--navy)}

.pillar-grid{
margin-top:60px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.pillar{
min-height:340px;
padding:44px;
border-radius:34px;
background:white;
border:1px solid var(--border);
display:flex;
flex-direction:column;
justify-content:flex-end;
box-shadow:0 24px 70px rgba(15,23,42,.06);
}

.pillar span{
font-size:13px;
font-weight:900;
letter-spacing:3px;
color:var(--green);
}

.pillar h3{
font-size:32px;
line-height:1.1;
margin:22px 0 16px;
color:var(--navy);
}

.pillar p{
font-size:18px;
line-height:1.75;
color:var(--light);
}

.featured{
background:linear-gradient(135deg,var(--green),var(--blue));
color:white;
}

.featured h3,
.featured p,
.featured span{
color:white;
}

.portfolio-section{
background:white;
color:var(--text);
}

.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:start;
}

.split p{
font-size:20px;
line-height:1.9;
color:var(--light);
}

.portfolio-row{
margin-top:70px;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}

.portfolio-row div{
padding:28px;
border-radius:24px;
background:var(--bg);
border:1px solid var(--border);
font-weight:900;
text-align:center;
color:var(--navy);
}

.ecosystem-section{
background:var(--navy);
color:white;
}

.flow{
margin-top:70px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.flow div{
padding:38px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.flow span{
color:var(--accent);
font-weight:900;
}

.flow h3{
font-size:34px;
margin:18px 0 12px;
}

.flow p{
color:#CBD5E1;
line-height:1.7;
}

.quality-section{
padding:120px 7%;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
background:var(--bg);
color:var(--text);
}

.quality-section h2{color:var(--navy)}

.quality-section p{
font-size:20px;
line-height:1.9;
color:var(--light);
}

.note{
margin-top:34px;
padding:28px;
background:white;
border-left:5px solid var(--green);
border-radius:18px;
line-height:1.8;
color:var(--light);
box-shadow:0 18px 50px rgba(15,23,42,.05);
}

.cta{
padding:120px 7%;
background:white;
text-align:center;
color:var(--text);
}

.cta h2{
max-width:900px;
margin:20px auto 36px;
color:var(--navy);
}

.footer{
padding:80px 7%;
background:var(--navy);
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
color:white;
}

.footer p,
.footer a{
color:#94A3B8;
display:block;
margin-bottom:12px;
line-height:1.8;
}

.footer a:hover{color:var(--accent)}

.copyright{
background:var(--navy);
padding:25px;
text-align:center;
color:#64748B;
border-top:1px solid rgba(255,255,255,.06);
}

/* MOBILE */

@media(max-width:900px){

.nav-links{display:none}
.menu-btn{display:block}

.navbar{
height:78px;
padding:0 6%;
}

.mobile-menu{top:78px}

.hero-slider{
padding-top:78px;
min-height:auto;
}

.slide{
grid-template-columns:1fr;
padding:50px 6% 120px;
gap:35px;
height:auto;
min-height:calc(100vh - 78px);
}

.slide-content h1{
font-size:40px;
letter-spacing:-2px;
}

.slide-content p{font-size:17px}

.slide-panel{
justify-self:start;
max-width:100%;
}

.panel-list{grid-template-columns:1fr}

.who-we{
grid-template-columns:1fr;
padding:90px 6%;
}

.feature-list{grid-template-columns:1fr}

.who-left h2{font-size:38px}

.who-right img{height:350px}

.card1,.card2{
position:static;
margin-top:20px;
}

.corporate-statement,
.split,
.quality-section,
.footer{
grid-template-columns:1fr;
}

.numbers,
.pillar-grid,
.portfolio-row,
.flow{
grid-template-columns:1fr;
}

.corporate-statement,
.section,
.quality-section,
.cta{
padding:90px 6%;
}

.numbers{
padding:0 6% 90px;
}

.corporate-statement h2,
.section h2,
.quality-section h2,
.cta h2{
font-size:36px;
}

.welcome-content h1{
font-size:48px;
letter-spacing:4px;
}

.welcome-content h2{font-size:20px}

.intro-logo{width:90px}
}
.ecosystem-flow-section{

padding:120px 7%;

text-align:center;

background:
linear-gradient(
135deg,
#F8FFFD,
#EDF5FF
);

}

.ecosystem-flow-section h2{

font-size:56px;

margin:20px 0 70px;

color:var(--navy);
}

.eco-line{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;
}

.eco-card{

width:240px;

padding:35px;

background:white;

border-radius:30px;

border:1px solid var(--border);

box-shadow:
0 25px 70px rgba(15,23,42,.06);

transition:.4s;
}

.eco-card:hover{

transform:
translateY(-10px)
scale(1.03);
}

.eco-icon{

font-size:54px;

margin-bottom:20px;
}

.eco-card h3{

font-size:28px;

color:var(--navy);

margin-bottom:12px;
}

.eco-card p{

color:var(--light);

line-height:1.7;
}

.arrow{

font-size:42px;

font-weight:900;

color:var(--green);

animation:
moveArrow 1s infinite alternate;
}

@keyframes moveArrow{

from{
transform:translateX(0)
}

to{
transform:translateX(10px)
}

}

@media(max-width:900px){

.eco-line{
flex-direction:column;
}

.arrow{
transform:rotate(90deg);
}

}