:root {
  --blue: #0253a5;
  --deep-blue: #e80382;
  --ink: #0f172b;
  --muted: #637089;
  --line: #dfe4ed;
  --paper: #f6f8fc;
  --pink: #e80382;
}

#vision2030{margin-top: var(--header-height)}

#vision2030 .hero {
  position: relative; min-height: calc(100vh - 82px); overflow: hidden;
  display: grid; align-items: center; padding: 8vw 7vw;
  color: white;     background: linear-gradient(135deg, #2277e1 0%, #2512c3 55%, #d360aa 100%);
}
#vision2030 .hero-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg, black, transparent 80%); }
#vision2030 .hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
#vision2030 .orbit-one { width: 720px; height: 720px; right: -180px; top: -160px; }
#vision2030 .orbit-two { width: 520px; height: 520px; right: -80px; top: -55px; }
#vision2030 .hero-content { position: relative; z-index: 2; max-width: 850px; }
#vision2030 .breadcrumb { position: absolute; top: -15vh; margin: 0; color: rgba(255,255,255,.72); font-size: 12px; }
#vision2030 .breadcrumb span { padding: 0 10px; opacity: .5; }
#vision2030 .hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 27px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.09); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; }
#vision2030 .hero h1 { margin: 0; font-size: clamp(49px, 6.2vw, 96px); line-height: 1.04; letter-spacing: -.01em; font-weight: 800; }
#vision2030 .hero h1 span { color: #ffd94d; }
#vision2030 .hero-lead { margin: 34px 0 0; color: rgba(255,255,255,.78); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.85; }
#vision2030 .hero-scroll { display: flex; align-items: center; gap: 12px; margin-top: 42px; padding: 0 0 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.65); background: transparent; color: white; font-weight: 700; }
#vision2030 .hero-number { position: absolute; z-index: 1; right: 2.5vw; bottom: -4vw; display: grid; color: transparent; font: 900 clamp(145px, 21vw, 350px)/.57 Arial, sans-serif; letter-spacing: -.12em; -webkit-text-stroke: 1px rgba(255,255,255,.24); }
#vision2030 .hero-side { position: absolute; right: 2.2vw; top: 50%; margin: 0; color: rgba(255,255,255,.55); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; transform: rotate(90deg) translateX(50%); transform-origin: right center; }

#vision2030 .section { padding: 130px 7vw; }
#vision2030 .section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 55px; color: var(--blue); }
#vision2030 .section-label span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; }
#vision2030 .section-label p { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
#vision2030 .section-label.light { color: rgba(255,255,255,.75); }
#vision2030 .eyebrow { margin: 0 0 22px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 2.2px; }
#vision2030 .light-text { color: var(--pink); }
#vision2030 .vision { display: grid; grid-template-columns: 20% 1fr; }
#vision2030 .vision-body h2, .roadmap-heading h2 { margin: 0; font-size: clamp(38px, 4.5vw, 72px); line-height: 1.25; letter-spacing: -.055em; }
#vision2030 .vision-body h2 em, .roadmap-heading h2 em { color: var(--blue); font-style: normal; }
#vision2030 .vision-copy {position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; margin-top: 66px; padding-top: 38px; border-top: 1px solid var(--line); }
#vision2030 .vision-copy > p { margin: 0; max-width: 680px; color: var(--muted); font-size: 17px; line-height: 2; word-break: keep-all; }
#vision2030 .vision-principle { display: flex; gap: 18px; color: var(--blue); }
#vision2030 .vision-principle span { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
#vision2030 .vision-principle strong { color: var(--ink); font-size: 16px; }

#vision2030 .strategy { color: white; background: #0c0a2f; }
#vision2030 .section-head { display: grid; grid-template-columns: 20% 1fr 30%; align-items: end; margin-bottom: 70px; }
#vision2030 .section-head .section-label { align-self: start; }
#vision2030 .section-head h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: 1.15; letter-spacing: -.055em; }
#vision2030 .section-intro { margin: 0; padding-bottom: 8px; color: #9ca7bd; font-size: 15px; line-height: 1.8; }
#vision2030 .strategy-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
#vision2030 .strategy-card { position: relative; min-height: 455px; padding: 32px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); overflow: hidden; transition: transform .3s ease, background .3s ease; }
#vision2030 .strategy-card:hover { z-index: 2; transform: translateY(-8px); background: #172142; }
#vision2030 .strategy-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -45px; bottom: -45px; border-radius: 50%; opacity: .12; background: currentColor; }
#vision2030 .strategy-card.blue { color: #75a2ff; }.strategy-card.violet { color: #bd8cff; }.strategy-card.orange { color: #ff9a55; }
#vision2030 .strategy-card.green { color: #80e3a1; }
#vision2030 .card-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; }
#vision2030 .strategy-card h3 { margin: 72px 0 22px; color: white; font-size: 24px; letter-spacing: -.03em; }
#vision2030 .strategy-card > p { margin: 0; color: #9aa6bd; font-size: 14px; line-height: 1.8; word-break: keep-all; }
#vision2030 .strategy-card ul { display: grid; gap: 12px; margin: 34px 0 0; padding: 25px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
#vision2030 .strategy-card li { display: flex; align-items: center; gap: 9px; color: #dce2ee; font-size: 13px; }

#vision2030 .roadmap {position: relative; display: grid; grid-template-columns: 20% 1fr; background: var(--paper); }
#vision2030 .roadmap-heading { grid-column: 2; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
#vision2030 .roadmap-heading > p { max-width: 330px; margin: 0 0 10px; color: var(--muted); line-height: 1.8; }
#vision2030 .timeline { grid-column: 2; position: relative; display: grid; margin-top: 90px; }
#vision2030 .timeline::before { content: ""; position: absolute; left: 100px; top: 22px; bottom: 22px; width: 1px; background: #cdd4e1; }
#vision2030 .timeline-item { position: relative; display: grid; grid-template-columns: 70px 60px 1fr; align-items: start; margin-bottom: 38px; }
#vision2030 .timeline-index { padding-top: 25px; color: #adb5c5; font: 700 12px/1 Arial, sans-serif; }
#vision2030 .timeline-dot { z-index: 2; width: 13px; height: 13px; margin: 23px auto 0; border: 4px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
#vision2030 .timeline-card { display: grid; grid-template-columns: 190px 190px 1fr; gap: 28px; align-items: center; padding: 27px 30px; border: 1px solid #a5bdff; background: white; transition: border-color .25s, box-shadow .25s; }
#vision2030 .timeline-card:hover { border-color:#289cff; box-shadow: 0 14px 38px rgba(23,42,102,.08); }
#vision2030 .timeline-meta { display: grid; gap: 8px; }
#vision2030 .timeline-meta span { color: #4b93ff; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
#vision2030 .timeline-meta strong { font-size: 18px; }
#vision2030 .timeline-card h3 { margin: 0; font-size: 28px; }
#vision2030 .timeline-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
#vision2030 .tags { grid-column: 3; display: flex; gap: 8px; flex-wrap: wrap; }
#vision2030 .tags span { padding: 7px 10px; border-radius: 3px; background: #f0f4fa; color: #4f72b1; font-size: 11px; font-weight: 700; }

#vision2030 .outcome { padding: 130px 7vw; color: white; background:#0a0e1e; }
#vision2030 .outcome-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 85px; }
#vision2030 .outcome-title h2 { margin: 0; font-size: clamp(42px, 5.3vw, 82px); line-height: 1.16; letter-spacing: -.06em; }
#vision2030 .outcome-title h2 span { color: var(--pink); }
#vision2030 .outcome-grid {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); }
#vision2030 .outcome-grid article { min-height: 280px; padding: 32px; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); }
#vision2030 .outcome-grid strong { display: block; margin-bottom: 60px; color: var(--pink); font: 900 56px/1 Arial, sans-serif; letter-spacing: -.06em; }
#vision2030 .outcome-grid h3 { margin: 0 0 12px; font-size: 17px; }
#vision2030 .outcome-grid p { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.7; }
#vision2030 .home-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 55px; padding: 17px 23px; color: var(--ink); background: var(--pink); text-decoration: none; font-size: 13px; font-weight: 800; }

@media (max-width: 1050px) {
  #vision2030 .strategy-grid, .outcome-grid { grid-template-columns: repeat(2, 1fr); }
  #vision2030 .section-head { grid-template-columns: 20% 1fr; }
  #vision2030 .section-intro { grid-column: 2; margin-top: 25px; }
  #vision2030 .timeline-card { grid-template-columns: 150px 130px 1fr; }
}

@media (max-width: 760px) {
  
  #vision2030 .hero { min-height: calc(100vh - 70px); padding: 110px 24px 70px; }
  #vision2030 .breadcrumb { top: -65px; }
  #vision2030 .hero-number { right: -15vw; bottom: 5vh; font-size: 45vw; opacity: .65; }
  #vision2030 .hero-side { display: none; }
  #vision2030 .desktop-break { display: none; }
  #vision2030 .section { padding: 85px 24px; }
  #vision2030 .vision, .roadmap { display: block; }
  #vision2030 .section-label { margin-bottom: 38px; }
  #vision2030 .vision-copy { grid-template-columns: 1fr; gap: 35px; margin-top: 45px; }
  #vision2030 .section-head { display: block; }
  #vision2030 .section-intro { margin-top: 24px; }
  #vision2030 .strategy-grid, .outcome-grid { grid-template-columns: 1fr; }
  #vision2030 .strategy-card { min-height: 390px; }
  #vision2030 .roadmap-heading { display: block; }
  #vision2030 .roadmap-heading > p { margin-top: 25px; }
  #vision2030 .timeline { margin-top: 60px; }
  #vision2030 .timeline::before { left: 18px; }
  #vision2030 .timeline-item { grid-template-columns: 38px 1fr; }
  #vision2030 .timeline-index { display: none; }
  #vision2030 .timeline-dot { grid-column: 1; }
  #vision2030 .timeline-card { grid-column: 2; grid-row: 1; display: block; padding: 24px; }
  #vision2030 .timeline-card h3 { margin: 22px 0 15px; }
  #vision2030 .timeline-card > p { margin-bottom: 20px; }
  #vision2030 .tags { display: flex; }
  #vision2030 .outcome { padding: 85px 24px; }
  #vision2030 .outcome-title { display: block; margin-bottom: 55px; }
  #vision2030 .outcome-grid article { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}




#vision2030 .character-point {
    position: absolute;
}
#vision2030 .character-point .vis-c-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#vision2030 .character-point.vis01-c01 {
    right: 17%;
    bottom: 0;
    aspect-ratio: 1 / 1;
    height: 32vw;
}

#vision2030 .character-point.vis02-c01 {
    right: 5%;
    top: -13vw;
    aspect-ratio: 400 / 320;
    height: 13vw;
}

#vision2030 .character-point.vis03-c01 {
    right: 0;
    bottom: 0;
    aspect-ratio: 160 / 180;
    height: 9vw;
	opacity: 0;
	transition:0.2s;
}
#vision2030 .strategy-card:hover .character-point.vis03-c01 {
	opacity: 1;
}
#vision2030 .character-point.vis03-c02 {
    right: 0;
    bottom: 0;
    aspect-ratio: 160 / 180;
    height: 9vw;
	opacity: 0;
	transition:0.2s;
}
#vision2030 .strategy-card:hover .character-point.vis03-c02 {
	opacity: 1;
}
#vision2030 .character-point.vis03-c03 {
    right: 0;
    bottom: 0;
    aspect-ratio: 160 / 180;
    height: 9vw;
	opacity: 0;
	transition:0.2s;
}
#vision2030 .strategy-card:hover .character-point.vis03-c03 {
	opacity: 1;
}
#vision2030 .character-point.vis03-c04 {
    right: 0;
    bottom: 0;
    aspect-ratio: 160 / 180;
    height: 9vw;
	opacity: 0;
	transition:0.2s;
}
#vision2030 .strategy-card:hover .character-point.vis03-c04 {
	opacity: 1;
}

#vision2030 .character-point.vis04-c01 {
    left: 0;
    bottom: 8vw;
    aspect-ratio: 460 / 920;
    height: 38vw;
}

#vision2030 .character-point.vis05-c01 {
    right: 12%;
    top: -17vw;
    aspect-ratio: 600 / 460;
    height: 17vw;
}


@media (max-width: 1600px) {
	#vision2030 .character-point.vis04-c01 {
		left: 0;
		bottom: 12vw;
		height: 46vw;
	}
	#vision2030 .character-point.vis05-c01 {
		right: 4%;
		top: -16vw;
		height: 16vw;
	}
}
@media (max-width: 1400px) {
	#vision2030 .character-point.vis01-c01 {
		right: 9%;
		bottom: 0;
		height: 38vw;
	}
	#vision2030 .vision {
		grid-template-columns: 16% 1fr;
	}
	#vision2030 .character-point.vis02-c01 {
		right: 2%;
		top: -15vw;
		height: 15vw;
	}
	#vision2030 .section {
    padding: 110px 7vw;
	}
	#vision2030 .strategy-card {
		padding-bottom: 80px;
	}
	#vision2030 .timeline {
    margin-top: 70px;
	}
	#vision2030 .character-point.vis04-c01 {
        left: -45px;
        bottom: 15vw;
        height: 50vw;
    }
}
@media (max-width: 1200px) {
	#vision2030 .character-point.vis04-c01 {
        left: -60px;
        bottom: 15vw;
        height: 64vw;
    }
	#vision2030 .character-point.vis03-c01,
	#vision2030 .character-point.vis03-c02,
	#vision2030 .character-point.vis03-c03,
	#vision2030 .character-point.vis03-c04 {
    height: 20vw;
	}
	#vision2030 .character-point.vis01-c01 {
        right: 6%;
        bottom: 0;
        height: 42vw;
    }
}
@media (max-width: 1024px) {
	#vision2030 .hero {
    padding: 5vw;
	}
	#vision2030 .character-point.vis02-c01 {
        right: 4%;
        top: -20vw;
        height: 20vw;
    }
	#vision2030 .vision {
        grid-template-columns: 1fr;
    }
	#vision2030 .section {
        padding: 90px 5vw;
    }
	#vision2030 .vision-copy {
    display: flex;
    grid-template-columns: 1fr;
    gap: 5vw;
    margin-top: 48px;
    padding-top: 24px;
    flex-direction: column-reverse;
	}
	#vision2030 .section-head {
    display: flex;
    margin-bottom: 40px;
	align-items: start;
    flex-direction: column;
	}
	
	#vision2030 .roadmap {
    display: flex;
    flex-direction: column;
	}
	#vision2030 .timeline-item {
    grid-template-columns: 40px 48px 1fr;
    margin-bottom: 24px;
	}
	#vision2030 .timeline::before {
    left: 63px;
	}
	#vision2030 .character-point.vis04-c01 {
        display: none;
	}
	#vision2030 .outcome-grid {
    grid-template-columns: 1fr 1fr;
	}
	#vision2030 .outcome {
    padding: 90px 5vw;
	}
}
@media (max-width: 780px) {
	#vision2030 .hero {
        min-height: calc(80vh - 70px);
	}
	#vision2030 .strategy-card {
        padding-bottom: 50px;
    }
	#vision2030 .section {
        padding: 60px 4vw;
    }
	#vision2030 .character-point.vis03-c01, 
	#vision2030 .character-point.vis03-c02, 
	#vision2030 .character-point.vis03-c03, 
	#vision2030 .character-point.vis03-c04 {
        height: 26vw;
    }
	    #vision2030 .timeline {
        margin-top: 40px;
    }
	#vision2030 .timeline-item {
        grid-template-columns: 38px 1fr;
    }
	#vision2030 .timeline::before {
        left: 18px;
    }
	#vision2030 .character-point.vis05-c01 {
        display: none;
	}
	#vision2030 .outcome {
        padding: 60px 4vw 80px;
    }
	#vision2030 .outcome-title {
        margin-bottom: 40px;
    }
	#vision2030 .outcome-grid strong {
    margin-bottom: 40px;
    font: 900 40px / 1 Arial, sans-serif;
	}
	#vision2030 .timeline-card h3 {
    font-size: 24px;
	}
}
@media (max-width:  620px) {
	#vision2030 .hero {
        min-height: 680px;
	}
	#vision2030 .hero h1 {
    margin: 0;
    font-size: clamp(44px, 6.2vw, 96px);
	}
	#vision2030 .character-point.vis01-c01 {
        right: 2%;
        bottom: 0;
        height: 50vw;
    }
	#vision2030 .vision-body h2, .roadmap-heading h2 {
    font-size: clamp(28px, 4.5vw, 72px);
	}
	#vision2030 .character-point.vis02-c01 {
        display: none;
	}
	#vision2030 .vision-copy > p {
    font-size: 15px;
    line-height: 150%;
	}
	#vision2030 .vision-principle span {
    gap: 2px;
	}
	#vision2030 .vision-principle {
    align-items: center;
	}
    #vision2030 .vision-copy {
        gap: 7vw;
        margin-top: 32px;
        padding-top: 28px;
	}
	#vision2030 .section {
        padding: 48px 4vw;
    }
	#vision2030 .strategy-card {
        padding: 24px;
        padding-bottom: 32px;
    }
	#vision2030 .strategy-card h3 {
		margin: 32px 0 16px;
	}
	#vision2030 .strategy-card ul {
		gap: 12px;
		margin: 20px 0 0;
		padding: 24px 0 0;
	}
	#vision2030 .character-point.vis03-c01, 
	#vision2030 .character-point.vis03-c02, 
	#vision2030 .character-point.vis03-c03, 
	#vision2030 .character-point.vis03-c04 {
        height: 34vw;
    }
	#vision2030 .strategy-card {
        min-height: 340px;
    }
	#vision2030 .timeline {
        margin-top: 20px;
    }
    #vision2030 .roadmap-heading > p {
        margin-top: 12px;
    }
	#vision2030 .timeline-card h3 {
        font-size: 22px;
        margin: 18px 0 6px;
    }    
	#vision2030 .timeline-card > p {
        margin-bottom: 16px;
        line-height: 150%;
    }
	#vision2030 .outcome-title h2 {
    font-size: clamp(32px, 5.3vw, 82px);
	}
	    #vision2030 .outcome-grid article {
        padding: 20px;
    }
	    #vision2030 .outcome-grid strong {
        margin-bottom: 28px;
        font: 900 28px / 1 Arial, sans-serif;
    }
	#vision2030 .outcome-grid h3 {
    margin: 0px 0 12px;
    font-size: 14px;
	}
	#vision2030 .outcome-grid p {
    font-size: 13px;
    line-height: 150%;
	}
	    #vision2030 .outcome-grid article {
        min-height: 200px;
    }
	    #vision2030 .outcome {
        padding: 40px 4vw 60px;
    }
}
@media (max-width: 540px) {
	
}