@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Hanken Grotesk', sans-serif; color: #F3F1EC; background: #1A2236; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: #4B76C4; color: #FFF8F0; }
[data-par] { will-change: transform; }

@keyframes obsmq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes obsfade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes obsripple { to { transform: scale(1); opacity: 0; } }

/* Shared surfaces / links / buttons */
.obs-surface { transition: box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.obs-surface:hover { box-shadow: 0 10px 26px rgba(91,138,224,0.16); border-color: rgba(75,118,196,0.4) !important; }
.obs-navlink:hover { color: #1A1D24 !important; }
.obs-navlink-dark:hover { color: #F3F1EC !important; }
.obs-cta-filled:hover { background: #3A5A9E !important; box-shadow: 0 6px 18px rgba(75,118,196,0.35); transform: translateY(-1px); }
.obs-cta-outline:hover { border-color: #4B76C4 !important; background: rgba(75,118,196,0.08) !important; }

/* Ripple */
.obs-ripple { position: relative; overflow: hidden; }
.obs-ripple-el { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.14); transform: scale(0); animation: obsripple .6s ease-out; pointer-events: none; }
.obs-cta-filled .obs-ripple-el { background: rgba(255,255,255,0.35); }

/* Value pillars accordion */
.obs-row:hover .obs-row-title { color: #6E97DD !important; }
.obs-pillar-icon { background: rgba(91,138,224,0.10); transition: background .25s ease; }
.obs-pillar.is-open .obs-pillar-icon { background: rgba(75,118,196,0.18); }
.obs-pillar-chevron { transform: rotate(0deg); transition: transform .3s ease; stroke: #7A87A6; }
.obs-pillar.is-open .obs-pillar-chevron { transform: rotate(180deg); stroke: #8FAEEA; }
.obs-pillar-teaser { display: block; }
.obs-pillar.is-open .obs-pillar-teaser { display: none; }
.obs-pillar-detail { display: none; }
.obs-pillar.is-open .obs-pillar-detail { display: block; animation: obsfade .3s ease; }

/* Platform tabs */
.obs-tab:hover { background: rgba(75,118,196,0.1) !important; }
.obs-tab:hover .obs-tab-name { color: #F3F1EC !important; }
.obs-tab { background: transparent; transition: background .2s ease; }
.obs-tab.is-active { background: rgba(75,118,196,0.16) !important; }
.obs-tab-num { color: #767C88; }
.obs-tab.is-active .obs-tab-num { color: #8FAEEA; }
.obs-tab-name { color: #9CA2AF; transition: color .2s ease; }
.obs-tab.is-active .obs-tab-name { color: #F3F1EC; }
.obs-platform-panel { display: none; }
.obs-platform-panel.is-active { display: block; }

/* Engagement types fan */
.obs-fan-slice { flex: 1; min-width: 64px; background: #212B44; border: 1px solid rgba(91,138,224,0.12); border-radius: 16px; cursor: pointer; overflow: hidden; position: relative; transition: flex .5s cubic-bezier(.65,0,.2,1), background .4s ease, border-color .4s ease; }
.obs-fan-slice.is-active { flex: 3.2; background: #2E3A5C; border-color: rgba(75,118,196,0.4); }
.obs-fan-num { color: #767C88; transition: color .4s ease; }
.obs-fan-slice.is-active .obs-fan-num { color: #8FAEEA; }
.obs-fan-desc { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s ease; pointer-events: none; }
.obs-fan-slice.is-active .obs-fan-desc { opacity: 1; transform: translateY(0); transition-delay: .15s, .15s; }
.obs-fan-title-wrap { transform-origin: left bottom; transform: rotate(-90deg); transition: transform .5s cubic-bezier(.65,0,.2,1); }
.obs-fan-slice.is-active .obs-fan-title-wrap { transform: rotate(0deg); }
.obs-fan-title { font-size: 15px; color: #7A87A6; transition: font-size .4s ease, color .4s ease; white-space: nowrap; }
.obs-fan-slice.is-active .obs-fan-title { font-size: 21px; color: #F3F1EC; }

/* image-slot appearance tweaks (about + hero photo slots) */
image-slot::part(empty) { inset: auto; top: 0; left: 0; right: 0; bottom: auto; height: 70%; overflow: hidden; justify-content: flex-start; padding-top: 14%; color: rgba(255,255,255,0.4); }
image-slot::part(ring) { border-color: rgba(255,255,255,0.18); }

/* About: team card tilt-on-hover */
.obs-tm-card:hover { transform: rotate(-1deg) translateY(-6px) !important; }
.obs-tm-card:nth-child(even):hover { transform: rotate(1deg) translateY(-6px) !important; }
.obs-tm-card:hover .obs-tm-tag { transform: rotate(-3deg) scale(1.05) !important; }
.obs-tm-card { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.obs-tm-tag { transition: transform .3s ease; }