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

	html{
		scroll-behavior:smooth;
	}

	body{

		font-family:
		Inter,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;

		background:#071325;

		color:#eaf3ff;

		line-height:1.5;

		overflow-x:hidden;

	}

	a{

		text-decoration:none;

		color:inherit;

	}

	img{

		max-width:100%;

		display:block;

	}

	.container{

		width:92%;

		max-width:1280px;

		margin:auto;

	}

	section{

		padding:100px 0;

	}

	:root{

		--primary:#0f4dff;

		--primary2:#0b2f85;

		--dark:#071325;

		--dark2:#0d1b35;

		--card:#102548;

		--border:rgba(255,255,255,.08);

		--text:#ffffff;

		--muted:#c2d5ff;

		--shadow:0 30px 70px rgba(0,0,0,.45);

	}

	body::before{

		content:"";

		position:fixed;

		top:-400px;

		left:-400px;

		width:900px;

		height:900px;

		border-radius:50%;

		background:radial-gradient(circle,
			rgba(35,93,255,.25),
			transparent 70%);

		pointer-events:none;

		z-index:-1;

	}

	body::after{

		content:"";

		position:fixed;

		right:-450px;

		bottom:-450px;

		width:1000px;

		height:1000px;

		border-radius:50%;

		background:radial-gradient(circle,
			rgba(0,128,255,.15),
			transparent 70%);

		pointer-events:none;

		z-index:-1;

	}

	header{

		position:fixed;

		top:0;

		left:0;

		width:100%;

		backdrop-filter:blur(16px);

		border-bottom:1px solid rgba(255,255,255,.05);

		z-index:999;

		transition:.3s;

	}

	header.scrolled{

		background:#081427;

		box-shadow:0 15px 35px rgba(0,0,0,.45);

	}

	.nav{

		display:flex;

		align-items:center;

		justify-content:space-between;

		height:70px;

	}

	.logo{

		width:200px;

		display:flex;

		align-items:center;

		justify-content:center;

		color:#8eb7ff;

		font-size:14px;

		letter-spacing:2px;

		text-transform:uppercase;

	}

	nav ul{

		display:flex;

		list-style:none;

		gap:35px;

	}

	nav a{

		color:#dce9ff;

		font-size:15px;

		font-weight:500;

		transition:.3s;

	}

	nav a:hover{

		color:#5ea7ff;

	}

	.hero{

		padding-top:180px;

		padding-bottom:20px;

		position:relative;

		overflow:hidden;

	}

	.hero-grid{

		display:grid;

		grid-template-columns:1.1fr .9fr;

		gap:70px;

		align-items:center;

	}

	.hero small{

		display:inline-block;

		padding:8px 18px;

		border-radius:30px;

		background:rgba(17,83,255,.18);

		border:1px solid rgba(79,150,255,.3);

		color:#8ebcff;

		margin-bottom:25px;

		letter-spacing:1px;

	}

	.hero h1{

		font-size:48px;

		line-height:1.1;

		margin-bottom:30px;

		font-weight:800;

	}

	.hero h1 span{

		background:linear-gradient(90deg,#ffffff,#5caeff);

		-webkit-background-clip:text;

		-webkit-text-fill-color:transparent;

	}

	.hero p{

		font-size:14px;

		color:#c7d8ff;

		max-width:760px;

		margin-bottom:40px;

	}

	.btn-group{

		display:flex;

		gap:20px;

		flex-wrap:wrap;

	}

	.btn{

		padding:16px 34px;

		border-radius:60px;

		font-weight:600;

		transition:.35s;

	}

	.btn-primary{

		background:linear-gradient(135deg,#115FD4,#0b3fae);

		color:#fff;

		box-shadow:0 15px 40px rgba(17,90,255,.35);

	}

	.btn-primary:hover{

		transform:translateY(-4px);

	}

	.btn-outline{

		border:1px solid rgba(255,255,255,.15);

		color:#fff;

	}

	.btn-outline:hover{

		background:#163f91;

	}

	.hero-card{

		background:linear-gradient(180deg,#102548,#0a1832);

		border:1px solid rgba(255,255,255,.08);

		border-radius:30px;

		padding:50px;

		box-shadow:var(--shadow);

	}

	.hero-card h3{

		font-size:32px;

		margin-bottom:25px;

	}

	.hero-card ul{

		list-style:none;

		display:grid;

		gap:16px;

	}

	.hero-card li{

		display:flex;

		align-items:center;

		gap:15px;

		font-size:17px;

		color:#d7e5ff;

	}

	.hero-card li::before{

		content:"";

		width:10px;

		height:10px;

		background:#2f7fff;

		border-radius:50%;

		flex:none;

	}

	/* ===== CONTINUE CSS PADA BAGIAN BERIKUTNYA ===== */
	.features{

		display:grid;

		grid-template-columns:repeat(3,1fr);

		gap:30px;

		margin-top:70px;

	}

	.feature{

		background:linear-gradient(180deg,#102548,#0c1d3c);

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

		border-radius:24px;

		padding:35px;

		transition:.35s;

	}

	.feature:hover{

		transform:translateY(-8px);

		border-color:rgba(47,127,255,.4);

		box-shadow:0 25px 60px rgba(0,0,0,.35);

	}

	.feature h3{

		font-size:24px;

		margin-bottom:18px;

		color:#fff;

	}

	.feature p{

		color:var(--muted);

		font-size:16px;

	}

	.section-title{

		text-align:center;

		margin-bottom:70px;

	}

	.section-title span{

		display:inline-block;

		padding:8px 20px;

		background:rgba(18,93,255,.15);

		border:1px solid rgba(18,93,255,.3);

		border-radius:30px;

		color:#84b7ff;

		margin-bottom:20px;

		font-size:14px;

		letter-spacing:1px;

	}

	.section-title h2{

		font-size:48px;

		margin-bottom:20px;

		font-weight:800;

	}

	.section-title p{

		max-width:850px;

		margin:auto;

		color:var(--muted);

		font-size:16px;

	}

	.about{

		display:grid;

		grid-template-columns:1fr 1fr;

		gap:70px;

		align-items:center;

	}

	.about-card{

		background:linear-gradient(180deg,#102548,#0a1933);

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

		border-radius:30px;

		padding:45px;

		box-shadow:var(--shadow);

	}

	.about-card h3{

		font-size:24px;

		margin-bottom:25px;

	}

	.about-card p{

		margin-bottom:20px;

		color:var(--muted);

	}

	.timeline{

		display:flex;

		flex-direction:column;

		gap:30px;

	}

	.timeline-item{

		display:flex;

		gap:25px;

		align-items:flex-start;

	}

	.timeline-year{

		width:90px;

		height:90px;

		border-radius:50%;

		background:linear-gradient(135deg,#115dff,#0d3ea5);

		display:flex;

		align-items:center;

		justify-content:center;

		font-size:20px;

		font-weight:bold;

		flex:none;

	}

	.timeline-content{

		flex:1;

		padding-top:10px;

	}

	.timeline-content h4{

		font-size:24px;

		margin-bottom:12px;

	}

	.timeline-content p{

		color:var(--muted);

	}

	.stats{

		display:grid;

		grid-template-columns:repeat(4,1fr);

		gap:30px;

		margin-top:60px;

	}

	.stat{

		background:#102548;

		border-radius:24px;

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

		padding:40px;

		text-align:center;

		transition:.35s;

	}

	.stat:hover{

		transform:translateY(-6px);

	}

	.stat h3{

		font-size:48px;

		color:#5ea7ff;

		margin-bottom:10px;

	}

	.stat p{

		color:var(--muted);

	}

	.focus-grid{

		display:grid;

		grid-template-columns:repeat(3,1fr);

		gap:30px;

	}

	.focus-item{

		background:#102548;

		padding:35px;

		border-radius:24px;

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

		transition:.35s;

	}

	.focus-item:hover{

		background:#143166;

		transform:translateY(-8px);

	}

	.focus-item h3{

		margin-bottom:15px;

		font-size:24px;

	}

	.focus-item p{

		color:var(--muted);

	}

	.company-grid{

		display:grid;

		grid-template-columns:repeat(2,1fr);

		gap:35px;

	}

	.company-card{

		background:linear-gradient(180deg,#11264a,#0c1c38);

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

		border-radius:28px;

		padding:38px;

		transition:.35s;

	}

	.company-card:hover{

		transform:translateY(-10px);

		border-color:#2f7fff;

		box-shadow:0 25px 60px rgba(0,0,0,.35);

	}

	.company-card h3{

		font-size:30px;

		margin-bottom:18px;

	}

	.company-card h4{

		font-size:18px;

		font-weight:600;

		margin-bottom:20px;

		color:#6fb3ff;

	}

	.company-card p{

		color:var(--muted);

	}

	.cta{

		background:linear-gradient(135deg,#0b3ea8,#115FD4);

		border-radius:40px;

		padding:80px;

		text-align:center;

		overflow:hidden;

		position:relative;

	}

	.cta h2{

		font-size:26px;

		margin-bottom:20px;

	}

	.cta p{

		font-size:16px;

		max-width:900px;

		margin:auto auto 40px;

		opacity:.95;

	}

	.contact-grid{

		display:grid;

		grid-template-columns:repeat(2,1fr);

		gap:40px;

	}

	.contact-card{

		background:#102548;

		border-radius:28px;

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

		padding:40px;

	}

	.contact-card h3{

		font-size:28px;

		margin-bottom:25px;

	}

	.contact-card ul{

		list-style:none;

		display:grid;

		gap:18px;

	}

	.contact-card li{

		color:var(--muted);

		word-break:break-word;

	}

	.contact-card a{

		color:#78b7ff;

	}

	footer{

		margin-top:100px;

		padding:45px 0;

		background:#050d1d;

		border-top:1px solid rgba(255,255,255,.05);

		text-align:center;

		color:#8fa7d2;

		font-size:15px;

	}

	.fade{

		opacity:0;

		transform:translateY(40px);

		transition:1s;

	}

	.fade.show{

		opacity:1;

		transform:none;

	}

	@media(max-width:1100px){

		.hero-grid,
		.about,
		.contact-grid,
		.company-grid{

			grid-template-columns:1fr;

		}

		.features,
		.focus-grid{

			grid-template-columns:repeat(2,1fr);

		}

		.stats{

			grid-template-columns:repeat(2,1fr);

		}

		.hero h1{

			font-size:50px;

		}

	}

	@media(max-width:768px){

		nav{

			display:none;

		}

		.hero{

			padding-top:150px;

		}

		.hero h1{

			font-size:40px;

		}

		.section-title h2{

			font-size:30px;

		}

		.features,
		.focus-grid,
		.stats{

			grid-template-columns:1fr;

		}

		.btn-group{

			flex-direction:column;

		}

		.cta{

			padding:50px 30px;

		}

		.cta h2{

			font-size:36px;

		}

	}

	@media (max-width: 512px) {
		.hero h1 {
			font-size: 30px;
		}
	}

	@media (max-width: 375px) {
		.hero h1 {
			font-size: 27px;
		}
	}