:root{--bg:#06111d;--panel:#0b1f30;--text:#f4f8fb;--muted:#bccbd5;--cyan:#43d5ed;--line:rgba(255,255,255,.15);--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}a{color:inherit}a:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}.skip-link{position:absolute;top:8px;left:24px;transform:translateY(-160%);z-index:10;background:var(--bg);padding:12px}.skip-link:focus{transform:none}
.opening{background:linear-gradient(90deg,rgba(3,16,27,.86),rgba(3,16,27,.35)),linear-gradient(0deg,var(--bg),transparent 48%),url('/assets/responsive/home/teknologi-med-ansvar-bg-1672.webp') center 48%/cover no-repeat}
.nav{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{font-weight:900;letter-spacing:.28em;text-decoration:none}.nav-links{display:flex;align-items:center;gap:20px;font-size:.9rem}.nav-links a{text-decoration:none}.nav-links a:hover{text-decoration:underline}.lang-link{border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.hero{padding:86px 0 78px}.ey{color:var(--cyan);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.hero h1{font-size:clamp(2.7rem,5.5vw,4.9rem);line-height:1.06;letter-spacing:-.045em;margin:22px 0;max-width:850px;text-wrap:balance}.hero h1 span{color:var(--cyan)}.lead{font-size:clamp(1.1rem,1.8vw,1.3rem);color:#d5e0e8;max-width:670px;margin:0}.hero-note{font-size:.86rem;color:var(--muted);margin:22px 0 0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border:1px solid var(--line);border-radius:9px;text-decoration:none;font-weight:750;background:rgba(6,17,29,.65);transition:background .18s,border-color .18s}.btn:hover{background:#173246;border-color:var(--cyan)}.btn.primary{background:var(--cyan);color:#03111b;border-color:var(--cyan)}.btn.primary:hover{background:#85e7f7}
.contents{display:flex;gap:28px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line);font-size:.9rem}.contents a{text-decoration:none;color:var(--muted);padding:4px 0}.contents a:hover{color:var(--cyan)}.contents span{color:var(--cyan);margin-right:8px;font-size:.75rem}
.section{padding:76px 0;border-bottom:1px solid var(--line)}h2{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.12;letter-spacing:-.035em;margin:14px 0 22px;max-width:850px;text-wrap:balance}.intro{font-size:1.08rem;color:var(--muted);max-width:740px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}.card{padding:28px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),#091925)}.card h3{font-size:1.25rem;line-height:1.3;margin:0 0 12px}.card p{color:var(--muted);margin:0}.statement{padding:62px 0;background:#0a1c2a}.statement blockquote{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.25;letter-spacing:-.025em;margin:0;max-width:950px;font-weight:750}.statement span{color:var(--cyan)}
.children{background:linear-gradient(135deg,#0b2132,#071724)}.questions{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}.q{padding:20px;border-top:2px solid var(--cyan);border-radius:0 0 10px 10px;background:rgba(255,255,255,.035);font-weight:650;line-height:1.5}.foot{padding:30px 0;color:var(--muted);font-size:.85rem}
@media(max-width:800px){.hero{padding:64px 0}.grid{gap:16px}.questions{grid-template-columns:repeat(2,1fr)}.contents{gap:18px}.section{padding:58px 0}.opening{background-image:linear-gradient(90deg,rgba(3,16,27,.9),rgba(3,16,27,.56)),linear-gradient(0deg,var(--bg),transparent 55%),url('/assets/responsive/home/teknologi-med-ansvar-bg-800.webp')}}
@media(max-width:520px){.wrap{width:calc(100% - 36px)}.nav{min-height:72px}.nav-links{gap:12px;font-size:.8rem}.hero{padding:48px 0 52px}.hero h1{font-size:2.65rem}.hero .actions{display:grid;grid-template-columns:1fr}.grid{grid-template-columns:1fr}.card{padding:24px}.contents{gap:12px 20px}.contents a{min-height:40px;display:flex;align-items:center}.questions{grid-template-columns:1fr}.statement{padding:44px 0}.opening{background-position:60% center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}