/* ============================================================ Siberson Interactive Presentation Experience — scoped styles Reuses the site design tokens from styles.css (:root vars). Everything is namespaced under .exp / #exp-* so the global stylesheet is untouched. ============================================================ */ /* ---------- base ---------- */ .exp-body{background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; min-height:100vh} .exp-body h1,.exp-body h2,.exp-body h3,.exp-body h4{font-family:"Sora","Inter",sans-serif; color:var(--ink); line-height:1.16} .exp-hidden{display:none !important} .exp-body :focus-visible{outline:3px solid var(--brand-2); outline-offset:2px; border-radius:6px} /* Without JS every section stacks and stays readable/crawlable. JS adds .exp-js on , which turns on presentation behaviour. */ .exp-js .exp-section{display:none} .exp-js .exp-section.active{display:block} .exp-js #exp-app{display:none} .exp-js #exp-app.open{display:grid} .exp-js #exp-landing.closed{display:none} /* ---------- landing ---------- */ #exp-landing{min-height:100vh; display:flex; flex-direction:column; background: radial-gradient(1100px 500px at 85% -10%, rgba(77,147,255,.14), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(22,100,254,.10), transparent 55%), var(--bg)} .expl-top{display:flex; align-items:center; gap:14px; padding:18px 26px} .expl-top .brand-img{height:32px; width:auto} .expl-top-actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} .expl-lang{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden} .expl-lang a{padding:7px 12px; font-size:13px; font-weight:600; color:var(--body); text-decoration:none} .expl-lang a.active{background:var(--brand); color:#fff} .expl-hero{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 22px 20px} .expl-eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:14px} .expl-hero h1{font-size:clamp(30px,4.3vw,52px); font-weight:800; max-width:900px; margin:0 0 16px} .expl-hero h1 .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent} .expl-lead{max-width:760px; color:var(--body); font-size:clamp(15px,1.35vw,18px); line-height:1.65; margin:0 auto 8px} .expl-lead + .expl-lead{margin-top:6px} /* mode cards */ .expl-modes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:1080px; width:100%; margin:34px auto 10px; padding:0 4px} .expl-mode{position:relative; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px 18px; cursor:pointer; font-family:inherit; transition:.2s ease; display:flex; flex-direction:column; gap:8px} .expl-mode:hover{border-color:var(--brand-2); box-shadow:var(--shadow-md); transform:translateY(-2px)} .expl-mode .em-ic{width:42px; height:42px; border-radius:12px; background:var(--brand-050); color:var(--brand); display:grid; place-items:center} .expl-mode .em-ic svg{width:22px; height:22px} .expl-mode h2{font-size:16.5px; margin:2px 0 0} .expl-mode p{font-size:13.5px; color:var(--body); line-height:1.5; margin:0} .expl-mode .em-go{margin-top:auto; padding-top:8px; font-size:13px; font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:6px} .expl-foot{display:flex; align-items:center; justify-content:center; gap:18px; padding:16px 20px 26px; font-size:13px; color:var(--muted); flex-wrap:wrap} .expl-foot a{color:var(--body); text-decoration:none; font-weight:500} .expl-foot a:hover{color:var(--brand)} /* ---------- workspace shell ---------- */ #exp-app{grid-template-columns:264px minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); grid-template-areas:"top top" "side main"; height:100vh; height:100dvh; overflow:hidden; background:var(--bg)} .exp-top{grid-area:top; display:flex; align-items:center; gap:12px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--bg); z-index:30} .exp-top .brand-img{height:26px; width:auto} .exp-mode-badge{font-size:12px; font-weight:600; color:var(--brand); background:var(--brand-050); border-radius:999px; padding:5px 12px; white-space:nowrap} .exp-top-actions{margin-left:auto; display:flex; align-items:center; gap:8px} .exp-iconbtn{width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:.18s} .exp-iconbtn:hover{border-color:var(--brand-2); color:var(--brand)} .exp-iconbtn svg{width:19px; height:19px} .exp-top .exp-exit{font-size:13px; font-weight:600; color:var(--body); text-decoration:none; padding:8px 12px; border-radius:10px} .exp-top .exp-exit:hover{color:var(--brand); background:var(--brand-050)} /* sidebar */ .exp-side{grid-area:side; border-right:1px solid var(--line); background:var(--bg-soft); overflow-y:auto; padding:14px 10px 20px} .exp-side nav{display:flex; flex-direction:column; gap:2px} .exp-nav-label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 12px 6px} .exp-nav-link{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none; border:0; background:none; cursor:pointer; font-family:inherit; text-align:left; width:100%} .exp-nav-link:hover{background:var(--brand-050); color:var(--brand)} .exp-nav-link[aria-current="true"]{background:var(--brand); color:#fff; font-weight:600} .exp-nav-link .nl-num{font-size:10.5px; font-weight:700; color:var(--muted); width:18px; flex:none; text-align:right} .exp-nav-link[aria-current="true"] .nl-num{color:rgba(255,255,255,.75)} .exp-nav-link img{height:14px; width:auto; flex:none} /* product deep-dive sub-nav groups */ .exp-nav-group{display:flex; flex-direction:column} .exp-nav-sub{display:none; flex-direction:column; gap:1px; margin:2px 0 4px} .exp-nav-group.open .exp-nav-sub{display:flex} .exp-nav-sub .exp-nav-link{padding:7px 12px 7px 40px; font-size:12.5px; color:var(--body); position:relative} .exp-nav-sub .exp-nav-link::before{content:""; position:absolute; left:26px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--brand-2); opacity:.55; transform:translateY(-50%)} .exp-nav-sub .exp-nav-link[aria-current="true"]{background:var(--brand); color:#fff} .exp-nav-sub .exp-nav-link[aria-current="true"]::before{background:#fff; opacity:.9} /* editions comparison table */ .exp-edt{width:100%; border-collapse:collapse; margin:18px 0; font-size:13px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden} .exp-edt th,.exp-edt td{padding:9px 12px; border-bottom:1px solid var(--line-2); text-align:center} .exp-edt th{background:var(--bg-soft); font-size:12.5px; color:var(--ink)} .exp-edt th:first-child,.exp-edt td:first-child{text-align:left; color:var(--ink-2); font-weight:500} .exp-edt .grp td{background:var(--bg-tint); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); text-align:left} .exp-edt .y{color:#1aa564; font-weight:700} .exp-edt .n{color:var(--muted)} .exp-edt-wrap{overflow-x:auto} .exp-edt-note{font-size:12.5px; color:var(--muted); margin:8px 0 0} /* screenshot gallery */ .exp-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin:20px 0} .exp-gallery .exp-shot{margin:0} /* mixed-ratio real screenshots: uniform tile height, whole image visible */ .exp-shot.fit img{max-height:225px; width:100%; object-fit:contain; background:var(--bg-soft); padding:6px} /* ---------- deep-dive visual components ---------- */ /* illustrative distribution bar */ .exp-bars{margin:20px 0} .exp-bar{display:flex; height:46px; border-radius:12px; overflow:hidden; border:1px solid var(--line)} .exp-bar span{display:grid; place-items:center; font-size:12.5px; font-weight:700; color:#fff; text-align:center; padding:0 6px} .exp-bar .b1{background:#1aa564; flex:22} .exp-bar .b2{background:#e0a020; flex:31} .exp-bar .b3{background:#0c1a33; flex:47} .exp-bar-key{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:12.5px; color:var(--body)} .exp-bar-key i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px} .exp-note{font-size:12.5px; color:var(--muted); font-style:italic; margin-top:8px} /* taxonomy ladder */ .exp-tax{display:grid; gap:10px; margin:20px 0} .exp-tax-row{display:grid; grid-template-columns:52px 1fr 200px; gap:14px; align-items:center; border:1px solid var(--line); border-left-width:5px; border-radius:var(--r-sm); padding:13px 15px; background:var(--bg)} .exp-tax-row .tx-lv{font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-align:center} .exp-tax-row b{display:block; font-size:15px; color:var(--ink); margin-bottom:3px} .exp-tax-row span{font-size:12.5px; color:var(--body); line-height:1.5} .exp-tax-row .tx-act{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; text-align:right; line-height:1.45} .exp-tax-row.t1{border-left-color:#1aa564} .exp-tax-row.t1 .tx-act{color:#1aa564} .exp-tax-row.t2{border-left-color:#e0a020} .exp-tax-row.t2 .tx-act{color:#b57d10} .exp-tax-row.t3{border-left-color:#e07020} .exp-tax-row.t3 .tx-act{color:#c25c10} .exp-tax-row.t4{border-left-color:#d43d3d} .exp-tax-row.t4 .tx-act{color:#c22c2c} @media(max-width:760px){.exp-tax-row{grid-template-columns:44px 1fr}.exp-tax-row .tx-act{grid-column:1/-1; text-align:left}} /* dual-axis (classification level x personal-data sensitivity) */ .exp-axis{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0} .exp-axis-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; background:var(--bg-soft)} .exp-axis-card h4{font-size:13.5px; margin:0 0 4px; color:var(--ink)} .exp-axis-card p{font-size:12.5px; color:var(--body); margin:0 0 10px; line-height:1.5} .exp-axis-card ol{margin:0; padding-left:18px; font-size:12.5px; color:var(--body); line-height:1.75} @media(max-width:760px){.exp-axis{grid-template-columns:1fr}} /* user journey */ .exp-journey{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:22px 0} .exp-journey-step{position:relative; padding:16px 18px 16px 0; margin-right:24px; border-top:3px solid var(--brand-050)} .exp-journey-step:last-child{margin-right:0} .exp-journey-step::before{content:""; position:absolute; top:-8px; left:0; width:13px; height:13px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-050)} .exp-journey-step .jn{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--brand); margin-bottom:6px; display:block} .exp-journey-step b{display:block; font-size:14.5px; color:var(--ink); margin-bottom:4px} .exp-journey-step span{font-size:12.5px; color:var(--body); line-height:1.5} @media(max-width:860px){.exp-journey{grid-template-columns:1fr 1fr}} @media(max-width:520px){.exp-journey{grid-template-columns:1fr}.exp-journey-step{margin-right:0}} /* schematic UI mock (guidance menu) */ .exp-mock{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-md); background:var(--bg); max-width:430px; margin:8px 0} .exp-mock-bar{display:flex; align-items:center; gap:7px; padding:10px 13px; background:var(--bg-soft); border-bottom:1px solid var(--line)} .exp-mock-bar i{width:9px; height:9px; border-radius:50%; background:#d8dee9; display:block} .exp-mock-bar b{font-size:12.5px; color:var(--ink-2); margin-left:6px; font-weight:600} .exp-mock-body{padding:13px} .exp-mock-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line-2); font-size:12.5px} .exp-mock-row:last-child{border-bottom:0} .exp-mock-row .mk-l{color:var(--body)} .exp-mock-row .mk-v{font-weight:700; color:var(--ink); background:var(--brand-050); border-radius:6px; padding:3px 9px; font-size:11.5px; white-space:nowrap} .exp-mock-row .mk-v.warn{background:#fdf0d8; color:#8a5a05} .exp-mock-row .mk-v.ok{background:#e2f5ec; color:#0d7a46} /* policy engine inputs / outputs */ .exp-io{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin:20px 0} .exp-io-col h4{font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 10px} .exp-io-chips{display:flex; flex-wrap:wrap; gap:7px} .exp-io-chips span{font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--bg)} .exp-io-arrow{font-size:26px; color:var(--brand-2); font-weight:300} .exp-io-col.out .exp-io-chips span{background:var(--brand-050); border-color:transparent; color:var(--brand)} @media(max-width:760px){.exp-io{grid-template-columns:1fr}.exp-io-arrow{display:none}} /* platform matrix */ .exp-plat{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; margin:18px 0} .exp-plat-col{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden} .exp-plat-col h4{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:var(--brand-050); margin:0; padding:9px 12px} .exp-plat-col ul{list-style:none; margin:0; padding:8px 12px 11px} .exp-plat-col li{font-size:12.5px; color:var(--ink-2); padding:4px 0; display:flex; gap:7px} .exp-plat-col li::before{content:"✓"; color:#1aa564; font-weight:700; flex:none} /* classification-context decision matrix */ .exp-mx{width:100%; border-collapse:collapse; font-size:12.5px; margin:18px 0; background:var(--bg)} .exp-mx th,.exp-mx td{padding:8px 9px; text-align:center; border:1px solid var(--line-2)} .exp-mx thead th{background:var(--bg-soft); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)} .exp-mx tbody th{text-align:left; font-weight:700; color:var(--ink); background:var(--bg)} .exp-mx .a{display:inline-block; border-radius:6px; padding:3px 8px; font-size:10.5px; font-weight:800; letter-spacing:.04em} .exp-mx .a-allow{background:#e2f5ec; color:#0d7a46} .exp-mx .a-warn{background:#fdf0d8; color:#8a5a05} .exp-mx .a-just{background:#fde8d8; color:#9c4f10} .exp-mx .a-block{background:#fbe0e0; color:#b32626} .exp-mx tbody tr.l1 th{border-left:4px solid #1aa564} .exp-mx tbody tr.l2 th{border-left:4px solid #e0a020} .exp-mx tbody tr.l3 th{border-left:4px solid #e07020} .exp-mx tbody tr.l4 th{border-left:4px solid #d43d3d} /* log-field chip cloud */ .exp-fields{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0} .exp-fields span{font-size:11.5px; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--line-2); border-radius:7px; padding:5px 9px} /* rollout timeline */ .exp-tl{display:grid; gap:12px; margin:20px 0} .exp-tl-phase{border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; background:var(--bg); border-left:4px solid var(--brand)} .exp-tl-phase .tl-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:7px} .exp-tl-phase .tl-h b{font-size:14px; color:var(--ink)} .exp-tl-phase .tl-h em{font-style:normal; font-size:11.5px; font-weight:700; color:var(--brand); background:var(--brand-050); border-radius:999px; padding:3px 10px} .exp-tl-steps{display:flex; flex-wrap:wrap; gap:7px} .exp-tl-steps span{font-size:12px; color:var(--body); background:var(--bg-soft); border:1px solid var(--line-2); border-radius:7px; padding:5px 10px} .exp-tl-steps span b{color:var(--brand); font-weight:800; margin-right:5px} /* classifier wheel (recreation of the Veriket module wheel visual) */ @property --wa{syntax:""; initial-value:0deg; inherits:false} .exp-wheelwrap{display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:26px; align-items:center; margin:22px 0} .exp-wheel{position:relative; width:100%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from var(--wa),#1664fe 0 51.4deg,#10b981 51.4deg 102.8deg,#4d93ff 102.8deg 154.3deg,#ca473a 154.3deg 205.7deg,#f5b70a 205.7deg 257.1deg,#0f4fd6 257.1deg 308.6deg,#e07020 308.6deg 360deg); box-shadow:var(--shadow-md); animation:expWheelSpin 44s linear infinite} @keyframes expWheelSpin{to{--wa:360deg}} .exp-wheel::before{content:""; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from var(--wa), transparent 0 50.4deg, rgba(255,255,255,.9) 50.4deg 51.4deg)} .exp-wheel-center{position:absolute; inset:26%; border-radius:50%; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; box-shadow:inset 0 0 0 1px var(--line-2); text-align:center; padding:8px} .exp-wheel-center img{width:64%; height:auto} .exp-wheel-center span{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#ca473a} .exp-wheel-legend{display:grid; grid-template-columns:1fr 1fr; gap:9px} .exp-wheel-legend .wl{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; background:var(--bg)} .exp-wheel-legend .wl i{width:12px; height:12px; border-radius:4px; flex:none; margin-top:3px} .exp-wheel-legend .wl b{display:block; font-size:13px; color:var(--ink)} .exp-wheel-legend .wl span{font-size:12px; color:var(--body); line-height:1.5} @media(max-width:860px){.exp-wheelwrap{grid-template-columns:1fr}.exp-wheel{max-width:280px; margin:0 auto}.exp-wheel-legend{grid-template-columns:1fr}} /* OS platform tiles (memorable pictograms: Windows, macOS, Linux, Pardus) */ .exp-os{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0} .exp-os .os{display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid var(--line); border-radius:14px; padding:16px 24px 13px; background:var(--bg); min-width:118px; box-shadow:var(--shadow-sm); transition:.2s} .exp-os .os:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)} .exp-os .os svg{width:38px; height:38px} .exp-os .os b{font-size:13.5px; color:var(--ink)} .exp-os .os span{font-size:11px; color:var(--muted); text-align:center} /* 5-step journey variant */ .exp-journey.j5{grid-template-columns:repeat(5,1fr)} @media(max-width:980px){.exp-journey.j5{grid-template-columns:1fr 1fr}} @media(max-width:520px){.exp-journey.j5{grid-template-columns:1fr}} /* Veriket product-accent for classification deep-dive sections */ [id^="vc-"] .exp-eyebrow{color:#ca473a} [id^="vc-"] .exp-journey-step::before{background:#ca473a; box-shadow:0 0 0 4px rgba(202,71,58,.14)} [id^="vc-"] .exp-journey-step .jn{color:#ca473a} /* KPI cards (metrics to track — no claimed results) */ .exp-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:11px; margin:18px 0} .exp-kpi{border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; background:var(--bg)} .exp-kpi b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:4px} .exp-kpi span{font-size:12px; color:var(--body); line-height:1.5} /* main stage */ .exp-main{grid-area:main; overflow-y:auto; scroll-behavior:smooth; position:relative} .exp-stage{max-width:1120px; margin:0 auto; padding:34px 40px 90px} .exp-section{padding:8px 0 30px} .exp-eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--brand); margin-bottom:10px} .exp-section h2{font-size:clamp(26px,3vw,38px); font-weight:800; margin:0 0 14px; max-width:840px} .exp-lead{font-size:clamp(15px,1.25vw,17.5px); color:var(--body); line-height:1.66; max-width:820px; margin:0 0 20px} .exp-lead b{color:var(--ink)} .exp-plogo{height:34px; width:auto; margin-bottom:14px; display:block} /* key points */ .exp-points{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:20px 0} .exp-point{background:var(--bg-soft); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:14px 16px} .exp-point b{display:block; font-size:14px; color:var(--ink); margin-bottom:4px} .exp-point span{font-size:13px; color:var(--body); line-height:1.5} /* chips (platforms, frameworks) */ .exp-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0} .exp-chip{font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 13px} /* visuals */ .exp-shot{border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-md); overflow:hidden; margin:22px 0; background:var(--bg)} .exp-shot img{display:block; width:100%; height:auto} .exp-shot figcaption{font-size:12.5px; color:var(--muted); padding:10px 14px; border-top:1px solid var(--line-2)} .exp-2col{display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:start} @media(max-width:900px){.exp-2col{grid-template-columns:1fr}} /* actions row */ .exp-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px} .exp-btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:11px 18px; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--ink-2); cursor:pointer; text-decoration:none; transition:.18s; font-family:inherit} .exp-btn:hover{border-color:var(--brand-2); color:var(--brand)} .exp-btn.pri{background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 8px 20px rgba(22,100,254,.24)} .exp-btn.pri:hover{background:var(--brand-600); color:#fff} .exp-btn svg{width:16px; height:16px} /* details / tech panels (native, keyboard-accessible) */ .exp-detail{border:1px solid var(--line); border-radius:var(--r-sm); margin:10px 0; background:var(--bg); overflow:hidden} .exp-detail summary{cursor:pointer; padding:13px 16px; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; display:flex; align-items:center; gap:10px} .exp-detail summary::-webkit-details-marker{display:none} .exp-detail summary::after{content:"+"; margin-left:auto; font-size:18px; color:var(--muted); font-weight:500} .exp-detail[open] summary::after{content:"–"} .exp-detail[open] summary{border-bottom:1px solid var(--line-2); color:var(--brand)} .exp-detail .ed-body{padding:14px 16px 16px; font-size:13.5px; color:var(--body); line-height:1.62} .exp-detail .ed-body ul{margin:8px 0 8px 18px; padding:0} .exp-detail .ed-body li{margin:5px 0} .exp-detail .ed-body a{color:var(--brand); font-weight:600; text-decoration:none} .exp-detail .ed-body a:hover{text-decoration:underline} /* lifecycle flow */ .exp-flow{display:flex; align-items:stretch; gap:0; margin:26px 0; flex-wrap:wrap} .exp-flow-step{flex:1; min-width:170px; position:relative; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px; margin-right:26px} .exp-flow-step:last-child{margin-right:0} .exp-flow-step::after{content:""; position:absolute; right:-20px; top:50%; width:14px; height:14px; border-top:2.5px solid var(--brand-2); border-right:2.5px solid var(--brand-2); transform:translateY(-50%) rotate(45deg)} .exp-flow-step:last-child::after{display:none} .exp-flow-step .fs-k{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px; display:block} .exp-flow-step b{display:block; font-size:14.5px; margin-bottom:5px; color:var(--ink)} .exp-flow-step span{font-size:12.5px; color:var(--body); line-height:1.5} .exp-flow-step.fk-discover .fs-k{color:#ca473a} .exp-flow-step.fk-classify .fs-k{color:#ca473a} .exp-flow-step.fk-protect .fs-k{color:#1463fd} .exp-flow-step.fk-monitor .fs-k{color:#428a3a} @media(max-width:760px){.exp-flow{flex-direction:column}.exp-flow-step{margin-right:0; margin-bottom:24px}.exp-flow-step::after{right:50%; top:auto; bottom:-19px; transform:translateX(50%) rotate(135deg)}} /* architecture diagram (pure CSS/HTML, verified components only) */ .exp-arch{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--bg-soft); margin:22px 0} .exp-arch-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:10px} .exp-arch-box{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px 12px; text-align:center} .exp-arch-box b{display:block; font-size:12.5px; color:var(--ink)} .exp-arch-box span{font-size:11px; color:var(--muted)} .exp-arch-box.hub{border-color:var(--brand-2); background:var(--brand-050)} .exp-arch-label{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:12px 0 7px} /* use-case cards */ .exp-cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin:20px 0} .exp-case{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:flex; flex-direction:column; gap:8px} .exp-case .ec-tag{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand)} .exp-case h3{font-size:15.5px; margin:0} .exp-case p{font-size:13px; color:var(--body); line-height:1.55; margin:0} .exp-case .ec-links{margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; gap:12px} .exp-case .ec-links a,.exp-case .ec-links button{font-size:12.5px; font-weight:600; color:var(--brand); text-decoration:none; background:none; border:0; cursor:pointer; padding:0; font-family:inherit} .exp-case .ec-links a:hover{text-decoration:underline} /* portfolio cards */ .exp-portfolio{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:22px 0} .exp-prod{background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:20px 18px; display:flex; flex-direction:column; gap:9px; transition:.2s} .exp-prod:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)} .exp-prod img{height:28px; width:auto; align-self:flex-start} .exp-prod h3{font-size:15px; margin:2px 0 0} .exp-prod p{font-size:13px; color:var(--body); line-height:1.55; margin:0} .exp-prod .ep-cta{margin-top:auto; padding-top:8px; font-size:13px; font-weight:600; color:var(--brand); background:none; border:0; cursor:pointer; text-align:left; padding-left:0; font-family:inherit} .exp-prod .ep-cta:hover{text-decoration:underline} /* logos band (references / ecosystem) reuse site marquee */ .exp-body .marquee{margin:16px 0} /* ---- landing visual layer: décor, stats strip, accented cards, deck banner, trust ---- */ .expl-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0} .expl-bg i{position:absolute; border-radius:50%; filter:blur(70px); opacity:.55} .expl-bg .b1{width:520px; height:520px; left:-140px; top:-160px; background:radial-gradient(circle,#dbe7ff,transparent 65%); animation:explFloat 14s ease-in-out infinite alternate} .expl-bg .b2{width:640px; height:640px; right:-200px; top:120px; background:radial-gradient(circle,#e7f6ef,transparent 65%); animation:explFloat 18s ease-in-out infinite alternate-reverse} .expl-bg .bg-ring{position:absolute; right:6%; top:56px; width:340px; height:340px; border:2px dashed #c9d9f280; border-radius:50%; animation:expWheelSpin 80s linear infinite} #exp-landing{position:relative} #exp-landing>*{position:relative; z-index:1} /* landing carries the SITE chrome (header+footer); deck mode hides it with the landing */ #exp-landing .site-header{z-index:5} #exp-landing .footer{margin-top:40px} /* keep the site footer identical to every other page: undo the deck's dark heading colour on .foot-h (exp-body h2 rule would otherwise override it) */ .exp-body .footer .foot-h{color:#fff} .exp-body .footer h2{color:#fff} .expl-top.slim{justify-content:flex-end; padding-top:14px} .expl-stats{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:26px auto 6px; max-width:860px} .expl-stats .es{display:flex; align-items:baseline; gap:8px; border:1px solid var(--line); border-radius:999px; padding:9px 18px; background:var(--bg); box-shadow:var(--shadow-sm)} .expl-stats .es b{font-size:19px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums} .expl-stats .es em{font-style:normal; font-size:12px; color:var(--muted); font-weight:600} .expl-mode{position:relative; overflow:hidden; transition:.2s} .expl-mode::before{content:""; position:absolute; left:0; top:0; right:0; height:4px; background:var(--em-c,#1664fe)} .expl-mode:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)} .expl-mode[data-mode="customer"]{--em-c:#1664fe} .expl-mode[data-mode="partner"]{--em-c:#0e9f6e} .expl-mode[data-mode="tour"]{--em-c:#e0a020} .expl-mode[data-mode="free"]{--em-c:#7c5cff} .expl-mode .em-ic{background:color-mix(in srgb,var(--em-c) 12%, #fff); color:var(--em-c)} .em-count{display:inline-block; margin:8px 0 2px; padding:3px 11px; border-radius:999px; background:color-mix(in srgb,var(--em-c) 10%, #fff); border:1px solid var(--line-2); color:var(--em-c); font-size:11px; font-weight:800; letter-spacing:.04em} .expl-deck{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; max-width:1010px; margin:22px auto 0; border:1px solid var(--line); border-radius:18px; padding:16px 22px; background:linear-gradient(120deg,#f6f9ff,#fff 55%); box-shadow:var(--shadow-sm)} .expl-deck .ed-l{display:flex; align-items:center; gap:16px} .expl-deck .ed-l img{flex:none} .expl-deck .ed-l b{display:block; font-size:15.5px; color:var(--ink)} .expl-deck .ed-l span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px} .expl-deck .ed-r{display:flex; gap:10px; flex-wrap:wrap} .expl-trust{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin:26px auto 0; max-width:1010px} .expl-trust .et-label{font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)} .expl-trust .et-logos{display:flex; align-items:center; gap:9px 20px; flex-wrap:wrap; justify-content:center} .expl-trust img{height:26px; width:auto; max-width:92px; object-fit:contain; filter:grayscale(100%); opacity:.75; transition:.18s} .expl-trust img:hover{filter:none; opacity:1} @keyframes explFloat{from{transform:translateY(-14px)}to{transform:translateY(16px)}} @media(max-width:760px){.expl-deck{flex-direction:column; align-items:flex-start}.expl-bg .bg-ring{display:none}} /* ---- corporate-strength slide: animated stat tiles, badges, standards ---- */ .exp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0} .stat{border:1px solid var(--line); border-radius:14px; padding:20px 16px 16px; background:linear-gradient(180deg,var(--bg),var(--bg-soft)); box-shadow:var(--shadow-sm); text-align:center; transition:.18s} .stat:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)} .stat .stat-n{display:block; font-size:clamp(30px,3vw,46px); font-weight:800; letter-spacing:-.02em; color:var(--brand); font-variant-numeric:tabular-nums; line-height:1.1} .stat b{display:block; font-size:14px; color:var(--ink); margin-top:4px} .stat em{display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:3px} .exp-strength-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 0} .sbadge{display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg); box-shadow:var(--shadow-sm); transition:.18s} .sbadge:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)} .sbadge .sb-ic{flex:none; width:34px; height:34px} .sbadge b{display:block; font-size:13.8px; color:var(--ink)} .sbadge span{display:block; font-size:11.8px; color:var(--muted); margin-top:1px} .exp-standards{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0} .exp-standards .lbl{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-right:6px} @media(max-width:760px){.exp-stats{grid-template-columns:1fr 1fr}.exp-strength-badges{grid-template-columns:1fr}} /* collapsible left navigation (desktop deck; hamburger toggles it) */ @media(min-width:981px){ .exp-nav-collapsed #exp-app{grid-template-columns:0 minmax(0,1fr)} .exp-nav-collapsed .exp-side{display:none} } /* ---- product architecture diagram: tier bands, icons, flow arrows ---- */ .exp-arch{display:flex; flex-direction:column; margin:16px 0} .exp-arch-label{display:flex; align-items:center; gap:12px; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:13px 0 8px} .exp-arch-label::before,.exp-arch-label::after{content:""; flex:1; height:1px; background:var(--line)} .exp-arch-label .al-arrow{flex:none; font-style:normal; width:24px; height:24px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; font-weight:900} .exp-arch-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} .exp-arch-box{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--bg); box-shadow:var(--shadow-sm); transition:.18s} .exp-arch-box:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)} .exp-arch-box b{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); margin-bottom:3px} .exp-arch-box span{font-size:12px; line-height:1.45; color:var(--muted)} .exp-arch-box .ab-ic{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .exp-arch-row.t1 .ab-ic{color:#1664fe} .exp-arch-row.t2 .ab-ic{color:#0e9f6e} .exp-arch-row.t3 .ab-ic{color:#e0a020} .exp-arch-box.hub{background:linear-gradient(135deg,#1664fe,#123a8f); border-color:transparent} .exp-arch-box.hub b{color:#fff} .exp-arch-box.hub span{color:#dbe6f7} .exp-arch-box.hub .ab-ic{color:#fff} @media(max-width:760px){.exp-arch-row{grid-template-columns:1fr}} /* ---- lifecycle ring (wheel-family visual for vc-when) ---- */ .exp-ring{position:relative; width:300px; height:300px; flex:none; margin:8px auto} .exp-ring .ring-track{position:absolute; inset:26px; border:2px dashed var(--line-2); border-radius:50%; animation:expWheelSpin 70s linear infinite} .exp-ring .ring-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:134px; height:134px; border-radius:50%; background:linear-gradient(135deg,#1664fe,#123a8f); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:12px; box-shadow:var(--shadow-md)} .exp-ring .ring-center b{font-size:13.5px; line-height:1.25} .exp-ring .ring-center em{font-style:normal; font-size:10.5px; opacity:.85; margin-top:3px} .exp-ring .rn{position:absolute; transform:translate(-50%,-50%); font-style:normal; white-space:nowrap; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:11.5px; font-weight:700; color:var(--ink); box-shadow:var(--shadow-sm)} .exp-ring .rn::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brand); margin-right:6px; vertical-align:1px} .exp-ring .rn:nth-of-type(2)::before{background:#0e9f6e} .exp-ring .rn:nth-of-type(3)::before{background:#e0a020} .exp-ring .rn:nth-of-type(4)::before{background:#e04b4b} .exp-ring .rn:nth-of-type(5)::before{background:#7c5cff} .exp-ring .rn:nth-of-type(6)::before{background:#0aa2c0} .exp-when2{align-items:center} @media(max-width:980px){.exp-ring{transform:scale(.86); margin:-8px auto}} /* compact side list next to a visual */ .exp-sidelist{display:flex; flex-direction:column; gap:8px} .exp-sidelist .sl-row{border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:var(--bg)} .exp-sidelist .sl-row b{font-size:13.5px; color:var(--ink)} .exp-sidelist .sl-row span{display:block; font-size:12.3px; line-height:1.45; color:var(--muted)} /* ---- two-axis cross diagram (vc-axes) ---- */ .exp-axviz{position:relative; width:100%; max-width:330px; height:252px; margin:14px auto 30px; border-left:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink)} .exp-axviz::before{content:""; position:absolute; left:-7.5px; top:-10px; border:6px solid transparent; border-bottom:9px solid var(--ink)} .exp-axviz::after{content:""; position:absolute; right:-10px; bottom:-7.75px; border:6px solid transparent; border-left:9px solid var(--ink)} .exp-axviz .ax-ylab{position:absolute; left:8px; top:-4px; font-size:11.5px; font-weight:800; color:var(--ink)} .exp-axviz .ax-xlab{position:absolute; right:0; bottom:-26px; font-size:11.5px; font-weight:800; color:var(--ink)} .exp-axviz .ax-zone{position:absolute; right:8px; top:8px; width:46%; height:46%; border:1.5px dashed rgba(224,75,75,.45); border-radius:12px; background:linear-gradient(135deg,rgba(224,75,75,.14),rgba(224,75,75,.03))} .exp-axviz .ax-dot{position:absolute; right:calc(23% - 7px); top:calc(23% - 7px); width:14px; height:14px; border-radius:50%; background:#e04b4b; box-shadow:0 0 0 6px rgba(224,75,75,.16); animation:axPulse 2.2s ease-in-out infinite} .exp-axviz .ax-tag{position:absolute; right:6px; top:57%; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:700; color:#b83a3a; box-shadow:var(--shadow-sm)} @keyframes axPulse{0%,100%{box-shadow:0 0 0 5px rgba(224,75,75,.16)}50%{box-shadow:0 0 0 11px rgba(224,75,75,.06)}} .exp-ax2{align-items:center} /* cluster position badge on the eyebrow (1/3 etc., set by JS) */ .exp-eyebrow[data-cluster]::after{content:attr(data-cluster); display:inline-block; margin-left:10px; padding:2px 10px; border-radius:999px; background:var(--brand-soft); border:1px solid var(--line-2); color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.02em; vertical-align:1px} /* free risk-assessment finale (gauge panel; buttons are content, not chrome) */ .exp-risk-cta{display:flex; align-items:center; gap:38px; margin:20px 0; border-radius:20px; padding:34px 40px; background:linear-gradient(120deg,#0b1830,#123a72); color:#fff; box-shadow:var(--shadow-md)} .exp-risk-cta .rc-gauge{flex:none; width:250px} .exp-risk-cta .rc-svg{width:100%; height:auto; display:block} .exp-risk-cta .rc-needle{transform-origin:100px 112px; transform:rotate(-62deg); animation:rcSweep 2s cubic-bezier(.3,1.4,.5,1) .4s forwards} @keyframes rcSweep{to{transform:rotate(38deg)}} .exp-risk-cta .rc-body b{display:block; font-size:21px; margin-bottom:8px; color:#fff} .exp-risk-cta .rc-body p{margin:0 0 18px; font-size:14.5px; line-height:1.6; color:#b9c7dd; max-width:56ch} .exp-risk-cta .rc-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px} .exp-risk-cta .rc-btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px; font-weight:700; font-size:14.5px; text-decoration:none; border:1.5px solid #ffffff55; color:#fff; transition:.18s} .exp-risk-cta .rc-btn:hover{background:#ffffff14; transform:translateY(-2px)} .exp-risk-cta .rc-btn.pri{background:#fff; color:#0b1830; border-color:#fff} .exp-risk-cta .rc-btn.pri:hover{box-shadow:0 10px 26px rgba(0,0,0,.35)} .exp-risk-cta .rc-chips .exp-chip{background:#ffffff14; border-color:#ffffff33; color:#dbe6f7} @media(max-width:760px){.exp-risk-cta{flex-direction:column; padding:24px; text-align:center}.exp-risk-cta .rc-actions{justify-content:center}} /* regulation mapping cards (the "why you need this" trigger slide) */ .exp-regs{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0} .exp-reg{border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--r-sm); padding:14px 16px; background:var(--bg); box-shadow:var(--shadow-sm)} .exp-reg>b{display:block; font-size:15.5px; color:var(--ink); margin-bottom:7px} .exp-reg .rg-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px} .exp-reg .rg-chip{font-size:11.5px; font-weight:800; letter-spacing:.03em; color:var(--brand); background:var(--brand-soft); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px} .exp-reg p{margin:0; font-size:13px; line-height:1.5; color:var(--muted)} .exp-reg:nth-child(2){border-left-color:#0e9f6e} .exp-reg:nth-child(3){border-left-color:#e0a020} .exp-reg:nth-child(4){border-left-color:#7c5cff} @media(max-width:760px){.exp-regs{grid-template-columns:1fr}} /* product logo pinned to every deep-dive slide (deck mode; body.exp-vc via JS) — sits BELOW the topbar buttons in its own card so it never collides with them */ .exp-deck-plogo{display:none} @media(min-width:981px){ .exp-js.exp-vc .exp-deck-plogo{display:block; position:fixed; top:80px; right:34px; width:150px; height:auto; z-index:40; filter:drop-shadow(0 1px 2px rgba(12,26,51,.12))} /* the hero's inline logo yields to the standard fixed logo (same position on every slide) */ .exp-js #veriket-classification .exp-plogo{display:none} } /* wide FAQ: two columns in deck so 12 answers fit one slide */ @media(min-width:981px){ .exp-faq.wide{display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-items:start} .exp-faq.wide details{break-inside:avoid; margin:0 0 8px} } /* "Bize Güvenenler" — symmetric sector cards, centred headers, big logos */ .exp-refs{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0} .exp-refs-row{display:flex; flex-direction:column; align-items:center; gap:9px; border:1px solid var(--line); border-radius:14px; padding:11px 14px 12px; background:var(--bg); box-shadow:var(--shadow-sm)} .exp-refs-row:first-child{grid-column:1/-1} .exp-refs-row .rf-sec{font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--brand); padding-bottom:7px; position:relative} .exp-refs-row .rf-sec::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:34px; height:3px; border-radius:3px; background:var(--brand)} .exp-refs-row .rf-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 12px} /* fixed, identical boxes so every logo sits on the same grid */ .exp-refs-row .rf-logos img{height:64px; width:132px; object-fit:contain; filter:grayscale(12%); transition:.18s} .exp-refs-row .rf-logos img:hover{filter:none; transform:scale(1.07)} /* per-sector accent colours — subtle top wash + coloured underline */ .exp-refs-row{background:linear-gradient(180deg,color-mix(in srgb,var(--rf-c,#1664fe) 5%, #fff),#fff 34%)} .exp-refs-row .rf-sec{color:var(--rf-c,#1664fe)} .exp-refs-row .rf-sec::after{background:var(--rf-c,#1664fe)} .exp-refs-row:nth-child(1){--rf-c:#1664fe} .exp-refs-row:nth-child(2){--rf-c:#e04b4b} .exp-refs-row:nth-child(3){--rf-c:#0e9f6e} .exp-refs-row:nth-child(4){--rf-c:#7c5cff} .exp-refs-row:nth-child(5){--rf-c:#e0a020} @media(max-width:760px){.exp-refs{grid-template-columns:1fr}.exp-refs-row .rf-logos img{height:44px; width:108px}} /* ecosystem: homepage-style marketplace cards inside the deck */ .exp-eco-pill{display:flex; align-items:center; justify-content:center; gap:12px; width:fit-content; margin:16px auto 14px; border:1px solid var(--line); border-radius:999px; padding:10px 22px; background:var(--bg); box-shadow:var(--shadow-sm); font-size:14px; font-weight:700; color:var(--ink)} .exp-eco-pill svg{flex:none} .exp-body .exp-revgrid{margin:0 0 6px} @media(min-width:981px){.exp-body .exp-revgrid{grid-template-columns:repeat(4,1fr)}} /* FAQ as a standard card accordion (product slide) */ .exp-faq details{border:1px solid var(--line); border-radius:12px; background:var(--bg); box-shadow:var(--shadow-sm); padding:0; overflow:hidden} .exp-faq details+details{margin-top:8px} .exp-faq summary{display:flex; align-items:center; gap:10px; padding:11px 14px; font-weight:700; font-size:13.8px; color:var(--ink); cursor:pointer; list-style:none} .exp-faq summary::-webkit-details-marker{display:none} .exp-faq summary::before{content:"+"; flex:none; width:22px; height:22px; border-radius:7px; background:var(--brand-soft); color:var(--brand); font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-size:15px; line-height:1} .exp-faq details[open] summary::before{content:"−"} .exp-faq details>p{margin:0; padding:0 14px 12px 46px; font-size:13.2px; line-height:1.55; color:var(--muted)} /* ecosystem cards */ .exp-eco{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:18px 0} .exp-eco a{display:flex; flex-direction:column; gap:6px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:15px 16px; text-decoration:none; transition:.18s} .exp-eco a:hover{border-color:var(--brand-2); box-shadow:var(--shadow-sm)} .exp-eco b{font-size:13.5px; color:var(--ink)} .exp-eco span{font-size:12px; color:var(--body); line-height:1.5} /* FAQ */ .exp-faq{max-width:860px} /* demo transition */ .exp-demo-ctx{background:var(--bg-tint); border:1px solid var(--brand-050); border-radius:var(--r); padding:20px; margin:18px 0} .exp-demo-ctx h3{font-size:15px; margin:0 0 12px} .exp-demo-ctx dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0; font-size:13.5px} .exp-demo-ctx dt{font-weight:600; color:var(--ink-2)} .exp-demo-ctx dd{margin:0; color:var(--body)} .exp-check{list-style:none; margin:16px 0; padding:0; max-width:720px} .exp-check li{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line-2)} .exp-check input[type=checkbox]{width:18px; height:18px; margin-top:2px; accent-color:var(--brand); flex:none} .exp-check label{font-size:14px; color:var(--ink-2); line-height:1.5; cursor:pointer} .exp-check label small{display:block; color:var(--muted); font-size:12.5px} .exp-demo-note{font-size:13px; color:var(--muted); background:var(--bg-soft); border-left:3px solid var(--brand-2); padding:10px 14px; border-radius:0 10px 10px 0; max-width:760px} /* section footer nav */ .exp-secnav{display:flex; justify-content:space-between; gap:12px; margin-top:34px; border-top:1px solid var(--line-2); padding-top:18px} .exp-secnav button{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:11px; padding:10px 16px; cursor:pointer; font-family:inherit; transition:.18s} .exp-secnav button:hover{border-color:var(--brand-2); color:var(--brand)} .exp-secnav button:disabled{opacity:.35; cursor:default} .exp-progress{font-size:12px; color:var(--muted); align-self:center} /* ---------- presenter panel ---------- */ .exp-panel{position:fixed; top:60px; right:0; bottom:0; width:300px; background:var(--bg); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(105%); transition:transform .26s ease; z-index:40; display:flex; flex-direction:column; overflow-y:auto; padding:16px} .exp-panel.open{transform:translateX(0)} .exp-panel h2{font-size:14px; margin:0 0 4px} .exp-panel .pp-sub{font-size:12px; color:var(--muted); margin-bottom:12px} .exp-panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px} .exp-panel-grid button,.exp-panel-grid a{display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; text-decoration:none; font-family:inherit; transition:.16s; text-align:left} .exp-panel-grid button:hover,.exp-panel-grid a:hover{border-color:var(--brand-2); color:var(--brand)} .exp-panel-grid svg{width:17px; height:17px; color:var(--brand)} .exp-panel .pp-close{position:absolute; top:10px; right:10px} /* ---------- search overlay ---------- */ .exp-search{position:fixed; inset:0; background:rgba(10,16,32,.45); z-index:60; display:none; padding:8vh 18px 18px; backdrop-filter:blur(2px)} .exp-search.open{display:flex; align-items:flex-start; justify-content:center} .exp-search-box{background:var(--bg); border-radius:var(--r); box-shadow:var(--shadow-lg); width:min(680px,100%); max-height:78vh; display:flex; flex-direction:column; overflow:hidden} .exp-search-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)} .exp-search-head svg{width:18px; height:18px; color:var(--muted); flex:none} #expSearchInput{flex:1; border:0; outline:0; font-size:15.5px; font-family:inherit; color:var(--ink); background:transparent} .exp-search-results{overflow-y:auto; padding:8px} .exp-sr{display:block; width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:0; background:none; cursor:pointer; font-family:inherit; text-decoration:none} .exp-sr:hover,.exp-sr.sel{background:var(--brand-050)} .exp-sr b{display:block; font-size:13.5px; color:var(--ink); font-weight:600} .exp-sr span{font-size:11.5px; color:var(--muted)} .exp-sr .sr-type{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:var(--brand-050); border-radius:5px; padding:2px 7px; margin-right:7px} .exp-search-empty{padding:22px 16px; font-size:13.5px; color:var(--muted); text-align:center} /* ---------- docs explorer ---------- */ .exp-docs-filters{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0} .exp-docs-filters select,.exp-docs-filters input{font-family:inherit; font-size:13.5px; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); min-width:170px} .exp-docs-list{border:1px solid var(--line); border-radius:var(--r-sm); max-height:430px; overflow-y:auto; background:var(--bg)} .exp-docs-list a{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-2); text-decoration:none; font-size:13.5px; color:var(--ink-2)} .exp-docs-list a:hover{background:var(--bg-soft); color:var(--brand)} .exp-docs-list a:last-child{border-bottom:0} .exp-docs-list .dl-cat{margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; flex:none} .exp-docs-count{font-size:12.5px; color:var(--muted); margin:8px 2px} /* ---------- mobile / tablet ---------- */ .exp-menu-btn{display:grid} /* desktop: collapses the sidebar; mobile: off-canvas drawer */ @media(max-width:980px){ #exp-app{grid-template-columns:1fr; grid-template-areas:"top" "main"} .exp-side{position:fixed; top:60px; left:0; bottom:0; width:280px; z-index:45; transform:translateX(-105%); transition:transform .26s ease; box-shadow:var(--shadow-lg)} .exp-side.open{transform:translateX(0)} .exp-menu-btn{display:grid} .exp-stage{padding:24px 20px 80px} .exp-panel{width:100%; top:auto; height:auto; max-height:72vh; border-left:0; border-top:1px solid var(--line); border-radius:18px 18px 0 0; transform:translateY(105%)} .exp-panel.open{transform:translateY(0)} .expl-modes{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ .expl-modes{grid-template-columns:1fr} .exp-mode-badge{display:none} .exp-top{gap:8px; padding:0 10px} .exp-section h2{font-size:24px} } /* overlay scrim for mobile sidebar */ .exp-scrim{position:fixed; inset:0; background:rgba(10,16,32,.35); z-index:42; display:none} .exp-scrim.show{display:block} /* ============================================================ DECK MODE — true presentation format (no mouse scrolling). Desktop (≥981px): each section is a slide, vertically centred, content builds fragment-by-fragment with ← → / clicker keys. Mobile keeps the scrollable document behaviour. ============================================================ */ /* the slide arrives in ONE pass — content blocks cascade in automatically (no click-to-build, no scrolling). Mobile/no-JS: everything simply visible. */ @media(min-width:981px){ .exp-js .exp-section.active > .frag{animation:expIn .6s ease both} .exp-js .exp-section.active > .frag:nth-of-type(1){animation-delay:.22s} .exp-js .exp-section.active > .frag:nth-of-type(2){animation-delay:.36s} .exp-js .exp-section.active > .frag:nth-of-type(3){animation-delay:.5s} .exp-js .exp-section.active > .frag:nth-of-type(4){animation-delay:.64s} .exp-js .exp-section.active > .frag:nth-of-type(5){animation-delay:.78s} .exp-js .exp-section.active > .frag:nth-of-type(n+6){animation-delay:.9s} /* symmetric grids: exactly 5 cards → one balanced row; exactly 6 → 3+3 */ .exp-points:has(> .exp-point:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)} .exp-points:has(> .exp-point:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} .exp-kpis:has(> .exp-kpi:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)} .exp-kpis:has(> .exp-kpi:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)} /* card grids ripple in as the slide builds */ .exp-js .exp-section.active .exp-point, .exp-js .exp-section.active .exp-kpi, .exp-js .exp-section.active .exp-case, .exp-js .exp-section.active .exp-prod, .exp-js .exp-section.active .exp-tax-row, .exp-js .exp-section.active .exp-journey-step, .exp-js .exp-section.active .os, .exp-js .exp-section.active .wl{animation:expIn .5s ease both} .exp-js .exp-section.active .exp-point:nth-child(1),.exp-js .exp-section.active .exp-kpi:nth-child(1),.exp-js .exp-section.active .exp-case:nth-child(1),.exp-js .exp-section.active .exp-prod:nth-child(1),.exp-js .exp-section.active .exp-tax-row:nth-child(1),.exp-js .exp-section.active .exp-journey-step:nth-child(1),.exp-js .exp-section.active .os:nth-child(1),.exp-js .exp-section.active .wl:nth-child(1){animation-delay:.3s} .exp-js .exp-section.active .exp-point:nth-child(2),.exp-js .exp-section.active .exp-kpi:nth-child(2),.exp-js .exp-section.active .exp-case:nth-child(2),.exp-js .exp-section.active .exp-prod:nth-child(2),.exp-js .exp-section.active .exp-tax-row:nth-child(2),.exp-js .exp-section.active .exp-journey-step:nth-child(2),.exp-js .exp-section.active .os:nth-child(2),.exp-js .exp-section.active .wl:nth-child(2){animation-delay:.42s} .exp-js .exp-section.active .exp-point:nth-child(3),.exp-js .exp-section.active .exp-kpi:nth-child(3),.exp-js .exp-section.active .exp-case:nth-child(3),.exp-js .exp-section.active .exp-prod:nth-child(3),.exp-js .exp-section.active .exp-tax-row:nth-child(3),.exp-js .exp-section.active .exp-journey-step:nth-child(3),.exp-js .exp-section.active .os:nth-child(3),.exp-js .exp-section.active .wl:nth-child(3){animation-delay:.54s} .exp-js .exp-section.active .exp-point:nth-child(4),.exp-js .exp-section.active .exp-kpi:nth-child(4),.exp-js .exp-section.active .exp-case:nth-child(4),.exp-js .exp-section.active .exp-prod:nth-child(4),.exp-js .exp-section.active .exp-tax-row:nth-child(4),.exp-js .exp-section.active .exp-journey-step:nth-child(4),.exp-js .exp-section.active .os:nth-child(4),.exp-js .exp-section.active .wl:nth-child(4){animation-delay:.66s} .exp-js .exp-section.active .exp-point:nth-child(n+5),.exp-js .exp-section.active .exp-kpi:nth-child(n+5),.exp-js .exp-section.active .exp-case:nth-child(n+5),.exp-js .exp-section.active .exp-prod:nth-child(n+5),.exp-js .exp-section.active .exp-tax-row:nth-child(n+5),.exp-js .exp-section.active .exp-journey-step:nth-child(n+5),.exp-js .exp-section.active .os:nth-child(n+5),.exp-js .exp-section.active .wl:nth-child(n+5){animation-delay:.78s} } /* slide entrance — staggered build of the header zone */ @keyframes expIn{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}} .exp-js .exp-section.active > .exp-eyebrow{animation:expIn .4s ease .04s both} .exp-js .exp-section.active > .exp-plogo{animation:expIn .4s ease both} .exp-js .exp-section.active > h2{animation:expIn .45s ease .1s both} .exp-js .exp-section.active > .exp-lead{animation:expIn .45s ease .18s both} .exp-js .exp-section.active > .exp-actions{animation:expIn .45s ease .26s both} @media(min-width:981px){ /* the stage is a slide: fill the viewport, centre the content, never scroll the page */ .exp-main{overflow:hidden} .exp-stage{height:100%; max-width:1200px; padding:20px 52px 74px; display:flex; flex-direction:column; overflow:auto; scrollbar-width:none} .exp-stage::-webkit-scrollbar{display:none} .exp-js .exp-section.active{display:flex; flex-direction:column; justify-content:safe center; flex:1; padding:0} .exp-js .exp-section.active > *{flex:none} /* per-section footer nav is replaced by the fixed deck bar */ .exp-secnav{display:none} /* ---- SLIDE TYPE STANDARD: one scale for every slide; readability floor is guaranteed by content budget (split slides), not by shrinking. Bottom CTA rows are hidden on slides (space → bigger type); the only exceptions are real content CTAs: deep-dive entries, Next Steps, FAQ. ---- */ .exp-actions{display:none} .exp-actions:has([data-mode]), #next-steps .exp-actions, #faq .exp-actions{display:flex} .exp-section h2{font-size:clamp(30px,2.9vw,42px); margin-bottom:16px} .exp-lead{font-size:clamp(16.5px,1.35vw,19.5px); margin-bottom:18px} .exp-points{margin:16px 0; gap:12px} .exp-point{padding:15px 17px} .exp-point b{font-size:15px} .exp-point span{font-size:13.8px} .exp-section h3{margin-top:20px !important; font-size:17px !important} .exp-kpis{gap:11px} .exp-kpi{padding:14px 16px} .exp-kpi b{font-size:14.5px} .exp-kpi span{font-size:13px} .exp-edt th,.exp-edt td{padding:7px 11px; font-size:13px} .exp-mx th,.exp-mx td{padding:7px 9px; font-size:13px} .exp-gallery{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .exp-shot figcaption{padding:9px 13px; font-size:12.5px} .exp-tax-row{padding:13px 16px} .exp-tax-row b{font-size:16px} .exp-tl-phase{padding:13px 16px} .exp-chip{font-size:13px; padding:7px 14px} .exp-wheel-legend .wl b{font-size:14px} .exp-wheel-legend .wl span{font-size:12.8px} .exp-journey-step b{font-size:15.5px} .exp-journey-step span{font-size:13.2px} } /* fixed deck navigation (bottom right) */ .exp-deck-nav{display:none; position:fixed; right:22px; bottom:18px; z-index:36; align-items:center; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 10px; box-shadow:var(--shadow-md)} @media(min-width:981px){.exp-js #exp-app.open ~ .exp-deck-nav, .exp-js #exp-app.open .exp-deck-nav{display:flex}} .exp-deck-nav button{width:38px; height:38px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:.16s; font-family:inherit} .exp-deck-nav button:hover{background:var(--brand-050); color:var(--brand)} .exp-deck-nav button:disabled{opacity:.3; cursor:default; background:none} .exp-deck-nav .exp-progress{min-width:52px; text-align:center; font-weight:600; color:var(--ink-2)} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ .exp-body *{transition:none !important; animation:none !important; scroll-behavior:auto !important} } /* ---------- print / "download as PDF": one slide per landscape page ---------- The [data-print] button marks the current flow's slides with .p-in and the body with .exp-printing, so the PDF contains exactly the presented deck. A uniform 0.78 zoom makes each slide fit a single A4-landscape page. */ @media print{ @page{size:A4 landscape; margin:8mm} body{background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact} .exp-top,.exp-side,.exp-panel,.exp-search,.exp-secnav,.exp-actions,.exp-deck-nav,.exp-deck-plogo,.exp-scrim,#exp-landing,#docs-explorer{display:none !important} #exp-app{display:block !important; height:auto; overflow:visible} .exp-main{overflow:visible; height:auto} .exp-stage{height:auto; overflow:visible; padding:0; max-width:none} /* corporate frame on every page: Siberson top-left, product logo top-right, contact footer — position:fixed repeats per printed page */ .print-head{display:flex !important; position:fixed; top:0; left:0; right:0; height:11mm; align-items:center; justify-content:space-between; padding:0 2mm; border-bottom:.4mm solid #e3e9f2; background:#fff; z-index:99} .print-head img{height:7mm; width:auto} .print-head .ph-prod{display:none} .print-pclass .print-head .ph-prod{display:block} .print-foot{display:flex !important; position:fixed; bottom:0; left:0; right:0; height:8mm; align-items:center; justify-content:center; gap:4mm; border-top:.4mm solid #e3e9f2; background:#fff; font-size:8.5pt; color:#5a6b85; z-index:99} /* one slide per page; simple top-aligned flow (the PPTX download is the primary export — Ctrl+P stays as a safe fallback) */ .exp-js .exp-section{display:block !important; zoom:0.75 !important; box-sizing:border-box; padding:16mm 3mm 12mm; page-break-after:always; break-after:page} .exp-js .exp-section:last-of-type{page-break-after:auto; break-after:auto} .exp-shot img{max-height:110mm !important; width:auto !important; margin:0 auto} .exp-printing .exp-section:not(.p-in){display:none !important} .exp-js .exp-section > *{animation:none !important; opacity:1 !important; transform:none !important} .exp-js .exp-section > .frag,.exp-js .frag{animation:none !important; opacity:1 !important; transform:none !important} .exp-js .exp-section .exp-plogo{display:block !important} .exp-point,.exp-kpi,.exp-case,.exp-prod,.exp-tax-row,.exp-journey-step,.os,.wl{animation:none !important; opacity:1 !important} .exp-wheel,.ring-track{animation:none !important} .exp-shot,.exp-gallery,.exp-arch,.exp-ring,.exp-axviz,.exp-refs,.exp-points,.exp-edt,.exp-mx{break-inside:avoid; page-break-inside:avoid} .exp-shot img{max-height:150mm} } /* print header/footer exist only for the PDF */ .print-head,.print-foot{display:none}