.overview-page { background: #f5faff; }
.overview-back { font-size: 14px; color: #145dc4; }
.overview-hero { min-height: 680px; padding: 100px 5vw; display: flex; align-items: center; background: linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.87) 36%,rgba(255,255,255,.05) 72%),url('/tecnologi-human-hero.png') center/cover; }
.overview-hero > div { max-width: 690px; }
.overview-hero h1 { font-size: clamp(46px,5vw,74px); font-weight: 700; color: #071b51; line-height: 1.04; letter-spacing: -.045em; }
.overview-hero .hero-lead { color: #071b51; max-width: 490px; }
.overview-intro { max-width: 1120px; margin: auto; padding: 58px 28px 30px; text-align: center; font-size: clamp(20px,2.1vw,27px); color: #102854; }
.overview-audiences { padding: 35px 5vw 60px; }
.overview-audiences > h2 { max-width: 700px; font-size: clamp(30px,3vw,44px); margin: 0 auto 45px; text-align: center; }
.audience-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 1350px; margin: auto; }
.audience { padding: 10px 26px 25px; border-left: 1px solid #cfdded; }
.audience:first-child { border-left: 0; }
.audience-number { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #0074ef; color: white; font-size: 22px; margin-bottom: 25px; }
.audience-1 .audience-number { background: #071b51; }.audience-2 .audience-number { background: #00828c; }.audience-3 .audience-number { background: #7046c8; }
.audience h3 { font-size: 21px; line-height: 1.25; min-height: 56px; margin-bottom: 20px; }
.audience ul { list-style: none; padding: 0; margin: 0; }.audience li { position: relative; padding-left: 23px; margin-bottom: 14px; font-size: 16px; }.audience li::before { content: '✓'; position: absolute; left: 0; color: #0074ef; font-weight: 750; }
.proposal-note { font-size: 14px; line-height: 1.6; color: #566783; margin: 30px auto 0; max-width: 760px; text-align: center; }
.overview-trust { padding: 70px 6vw; color: white; background: linear-gradient(90deg,rgba(0,42,68,.98),rgba(0,57,110,.83) 55%,rgba(0,53,99,.3)),url('/tecnologi-city-hero.png') center/cover; }
.overview-trust h2 { max-width: 750px; font-size: clamp(34px,4vw,56px); }.overview-trust p { max-width: 760px; margin: 22px 0 42px; font-size: 22px; }.overview-trust ul { display: flex; flex-wrap: wrap; gap: 24px; padding: 0; list-style: none; }.overview-trust li { border-left: 2px solid #88c9ff; padding-left: 18px; max-width: 180px; font-size: 16px; }
.overview-levels { padding: 70px 6vw; max-width: 1300px; margin: auto; }.overview-levels h2 { font-size: clamp(32px,4vw,50px); max-width: 800px; }.overview-levels > p { max-width: 940px; font-size: 20px; margin: 25px 0; }.levels-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:40px 0; }.levels-grid article { border-top:2px solid #1678e8; padding-top:24px; }.levels-grid h3 { margin:15px 0; font-size:24px; }.levels-grid p { font-size:17px; }.overview-levels > h3 { font-size:28px; }
@media(max-width:640px) { .levels-grid { grid-template-columns:1fr; }.overview-levels { padding:48px 24px; } }
.overview-closing { padding: 65px 6vw; }.overview-closing h2 { font-size: clamp(32px,4vw,50px); }.overview-closing p:not(.eyebrow):not(.proposal-note) { font-size: 20px; max-width: 850px; margin: 22px 0 28px; }
@media(max-width:980px) { .audience-grid { grid-template-columns: 1fr 1fr; gap: 35px 0; }.audience:nth-child(3) { border-left: 0; }.overview-back { display: none; }.overview-hero > div { max-width: 580px; } }
@media(max-width:640px) { .overview-hero { min-height: 820px; padding: 55px 22px; align-items: flex-start; background-image:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.88) 35%,rgba(255,255,255,0) 65%),url('/tecnologi-human-hero.png'); background-position: 68% center; }.overview-hero h1 { font-size: 43px; }.overview-hero .hero-lead { font-size: 18px; max-width: 310px; }.overview-intro { padding: 42px 22px 20px; }.audience-grid { grid-template-columns: 1fr; }.audience { border-left: 0; border-top: 1px solid #cfdded; padding: 26px 10px; }.audience h3 { min-height: 0; }.overview-trust, .overview-closing { padding: 48px 24px; }.overview-trust ul { display: grid; grid-template-columns: 1fr 1fr; } }