/* Reset */
html{
scroll-behavior:smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Arial, sans-serif;
background: #f5f7fb;
color: #333;
}
/* Header */
/*=========================================
Header
==========================================*/
.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:#0f4c81;
color:white;
}
.logo{
font-size:30px;
font-weight:700;
}
.tagline{
font-size:14px;
margin-top:6px;
color:#d8e7f5;
font-weight:400;
}
.header-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
}
.environment{
background:#28a745;
color:white;
padding:6px 14px;
border-radius:20px;
font-size:13px;
font-weight:600;
letter-spacing:.5px;
}
.version{
background:rgba(255,255,255,.15);
padding:6px 14px;
border-radius:20px;
font-size:13px;
}
/*=========================================
Hero
==========================================*/
.hero{
background:linear-gradient(135deg,#0f8131,#1b6ca8);
color:white;
padding:90px 40px;
text-align:center;
}
.hero-content{
max-width:900px;
margin:auto;
}
.hero-badge{
display:inline-block;
background:rgba(255,255,255,.15);
padding:10px 20px;
border-radius:30px;
margin-bottom:30px;
font-size:15px;
letter-spacing:1px;
}
.hero h1{
font-size:56px;
margin-bottom:25px;
}
.hero p{
font-size:22px;
line-height:1.8;
margin-bottom:40px;
opacity:.95;
}
.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.hero-btn{
padding:15px 30px;
border:none;
border-radius:30px;
font-size:17px;
cursor:pointer;
transition:.3s;
}
.hero-btn.primary{
background:white;
color:#0f4c81;
}
.hero-btn.secondary{
background:transparent;
color:white;
border:2px solid white;
}
.hero-btn:hover{
transform:translateY(-4px);
}
/* Dashboard */
.dashboard {
padding: 40px;
}
/* Projects */
.projects {
padding: 40px;
}
/* Footer */
footer {
background: #1f2937;
color: white;
text-align: center;
padding: 25px;
}
/* ===========================
KPI Dashboard
=========================== */
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 25px;
padding: 50px;
}
.kpi-card {
transition:all .25s ease;
background: white;
border-radius: 12px;
padding: 30px;
text-align: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
transition: all .3s ease;
border-top: 5px solid #0f4c81;
}
.kpi-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.kpi-number {
font-size: 42px;
font-weight: bold;
color: #0f4c81;
margin-bottom: 10px;
}
.kpi-title {
font-size: 18px;
color: #555;
}
/* =====================================
AI Capability Areas
===================================== */
.capabilities{
padding:60px 50px;
background:#ffffff;
}
.capabilities h2{
text-align:center;
color:#0f4c81;
font-size:34px;
margin-bottom:40px;
}
.capability-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.capability-card{
transition:all .30s ease;
background:#f7f9fc;
border-radius:12px;
padding:30px;
text-align:center;
transition:.3s;
border:1px solid #dce4ee;
}
.capability-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.capability-icon{
font-size:54px;
margin-bottom:20px;
}
.capability-card h3{
color:#0f4c81;
margin-bottom:15px;
}
.capability-card p{
line-height:1.7;
color:#555;
}
/* =====================================
AI Applications
===================================== */
.projects{
padding:60px 50px;
}
.projects h2{
text-align:center;
font-size:34px;
color:#0f4c81;
margin-bottom:40px;
}
.project-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
gap:30px;
}
.project-card{
background:white;
border-radius:20px;
padding:30px;
transition:all .30s ease;
cursor:pointer;
}
.project-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}
.project-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:25px;
}
.project-icon{
font-size:50px;
}
.status{
display:inline-block;
padding:6px 12px;
border-radius:20px;
font-size:13px;
font-weight:600;
}
.status.ready{
background:#d8f5dd;
color:#167c32;
}
.status.progress{
background:#fff3cd;
color:#8a6d00;
}
.status.planned{
background:#dbeafe;
color:#1e40af;
}
.project-info{
width:100%;
margin-bottom:20px;
border-collapse:collapse;
}
.project-info td{
padding:10px;
border-bottom:1px solid #ececec;
}
.project-card p{
line-height:1.8;
margin-bottom:25px;
color:#555;
}
.project-card button{
width:100%;
}
/* ==========================================
AI Roadmap
========================================== */
.roadmap{
padding:70px 50px;
background:#ffffff;
}
.roadmap h2{
text-align:center;
color:#0f4c81;
font-size:34px;
margin-bottom:50px;
}
.timeline{
max-width:900px;
margin:auto;
border-left:4px solid #0f4c81;
padding-left:35px;
}
.timeline-item{
position:relative;
margin-bottom:45px;
}
.timeline-circle{
position:absolute;
left:-54px;
width:34px;
height:34px;
border-radius:50%;
background:#0f4c81;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}
.future .timeline-circle{
background:#f39c12;
}
.timeline-content{
background:#f8f9fb;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.timeline-content h3{
margin-bottom:10px;
color:#0f4c81;
}
.timeline-content p{
color:#555;
line-height:1.6;
}
/* ==========================================
Technology Stack
========================================== */
.technology{
padding:70px 50px;
background:#f5f7fb;
}
.technology h2{
text-align:center;
color:#0f4c81;
font-size:34px;
margin-bottom:40px;
}
.tech-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
.tech-card{
background:white;
border-radius:12px;
padding:30px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.tech-card h3{
color:#0f4c81;
margin-bottom:20px;
}
.tech-card ul{
list-style:none;
padding:0;
}
.tech-card li{
padding:10px 0;
border-bottom:1px solid #eeeeee;
}
/* ===================================
Search
=================================== */
.search-area{
text-align:center;
margin-bottom:35px;
}
#searchBox{
width:450px;
max-width:90%;
padding:14px 18px;
border-radius:30px;
border:1px solid #d0d7e2;
font-size:16px;
outline:none;
transition:.3s;
}
#searchBox:focus{
border-color:#0f4c81;
box-shadow:0 0 10px rgba(15,76,129,.15);
}
/*=========================================
Category Filters
==========================================*/
.filter-area{
text-align:center;
margin-bottom:35px;
}
.filter-btn{
margin:6px;
padding:10px 18px;
border:none;
border-radius:25px;
background:#e5edf6;
color:#0f4c81;
cursor:pointer;
transition:.3s;
font-size:15px;
}
.filter-btn:hover{
background:#0f4c81;
color:white;
}
.filter-btn.active{
background:#0f4c81;
color:white;
}
/* ==========================================
Vision Statement
========================================== */
.vision{
padding:50px;
}
.vision-card{
transition:all .30s ease;
max-width:1000px;
margin:auto;
background:white;
border-left:6px solid #0f4c81;
border-radius:12px;
padding:35px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.vision-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.vision-card h2{
color:#0f4c81;
margin-bottom:15px;
font-size:30px;
}
.vision-card p{
font-size:18px;
line-height:1.8;
color:#555;
}
/* ==========================================
Top Navigation
========================================== */
.top-nav{
position:sticky;
top:0;
z-index:999;
display:flex;
justify-content:center;
gap:35px;
background:white;
padding:16px;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.top-nav a{
color:#0f4c81;
text-decoration:none;
font-weight:600;
transition:.3s;
padding:8px 14px;
border-radius:20px;
}
.top-nav a:hover{
background:#0f4c81;
color:white;
}
.header-right{
display:flex;
align-items:center;
gap:15px;
}
#liveClock{
font-size:14px;
color:white;
}
.launch-btn{
width:100%;
margin-top:20px;
background:#0f4c81;
color:white;
border:none;
border-radius:10px;
padding:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all .25s ease;
}
.launch-btn-disabled{
width:100%;
margin-top:20px;
background:lightgray;
color:white;
border:none;
border-radius:10px;
padding:14px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:all .25s ease;
}
.launch-btn:hover{
background:#1d5fa3;
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.18);
}
/*=========================================
Active Navigation
==========================================*/
.top-nav a.active{
background:#0f4c81;
color:white;
}
.modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
z-index:9999;
}
.modal-content{
background:white;
width:60%;
max-width:1250px;
max-height:90vh;
overflow-y:auto;
max-width:90%;
margin:30px auto;
padding:25px;
border-radius:14px;
position:relative;
animation:fadeIn .25s;
}
.close{
position:absolute;
right:20px;
top:15px;
font-size:30px;
cursor:pointer;
}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(-20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*=========================================
Project Details
==========================================*/
.details-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:30px;
}
.details-icon{
width:70px;
height:70px;
border-radius:15px;
background:#eef5fb;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
}
.details-version{
color:#666;
margin-top:5px;
}
.details-grid{
display:grid;
grid-template-columns:180px 1fr;
row-gap:12px;
column-gap:20px;
margin:25px 0;
}
.details-grid .label{
font-weight:600;
color:#0f4c81;
}
.document-list{
margin-top:15px;
padding-left:20px;
}
.document-list li{
margin-bottom:8px;
}
.details-buttons{
display:flex;
gap:15px;
margin-top:30px;
}
.secondary-btn{
background:white;
border:2px solid #0f4c81;
color:#0f4c81;
border-radius:10px;
padding:14px 22px;
cursor:pointer;
transition:.3s;
}
.secondary-btn:hover{
background:#0f4c81;
color:white;
}
.details-three-column{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:30px;
}
.solution-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:30px;
}
.solution-left{
flex:1;
}
.solution-title{
font-size:28px;
font-weight:700;
color:#0f4c81;
}
.solution-subtitle{
color:#777;
margin-top:6px;
}
.solution-actions{
display:flex;
gap:10px;
align-items:center;
}
.small-launch-btn{
padding:8px 18px;
border:none;
border-radius:8px;
background:#0f4c81;
color:white;
cursor:pointer;
}
.small-close-btn{
padding:8px 18px;
border:1px solid #bbb;
background:white;
border-radius:8px;
cursor:pointer;
}
.section-title{
font-size:22px;
color:#21467d;
margin:30px 0 20px;
font-weight:700;
}
.info-card{
background:#fafbfd;
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px;
height:100%;
}
.info-card h3{
margin-bottom:15px;
color:#23407c;
font-size:22px;
}
@media(max-width:1000px){
.details-three-column{
grid-template-columns:1fr;
}
}
.small-disabled-btn{
background:#d1d5db;
color:#666;
border:none;
padding:10px 22px;
border-radius:10px;
font-size:15px;
cursor:not-allowed;
opacity:.9;
}
.portal-title{
font-size:32px;
font-weight:700;
text-align: center;
}
.portal-header{
text-align:center;
}
.ai-icon{
font-size:64px;
margin-bottom:6px;
}
.research-note-section {
padding: 38px 20px;
display: flex;
justify-content: center;
background: linear-gradient(
135deg,
rgba(240, 249, 255, 0.9),
rgba(240, 253, 244, 0.9)
);
}
.research-note-card {
width: 100%;
max-width: 1300px;
display: flex;
align-items: center;
gap: 22px;
padding: 24px 30px;
background: linear-gradient(
135deg,
#ffffff 0%,
#f0f9ff 50%,
#f0fdf4 100%
);
border: 1px solid #dbeafe;
border-left: 5px solid #0f766e;
border-radius: 16px;
box-shadow:
0 10px 30px rgba(15, 76, 129, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04);
}
.research-note-icon {
min-width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
background: linear-gradient(
135deg,
#dbeafe,
#dcfce7
);
border-radius: 14px;
}
.research-note-content {
flex: 1;
}
.research-note-title {
margin-bottom: 8px;
font-size: 19px;
font-weight: 700;
color: #0f4c81;
letter-spacing: 0.2px;
}
.research-note-content p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #334155;
}
@media (max-width: 768px) {
.research-note-card {
padding: 22px;
gap: 16px;
}
.research-note-icon {
min-width: 50px;
height: 50px;
font-size: 26px;
}
.research-note-title {
font-size: 16px;
}
.research-note-content p {
font-size: 13px;
}
}