.io-wrap{--gutter:max(24px, calc((100vw - min(1200px, 100vw - 48px)) / 2));overflow-x:clip}
.io-container{max-width:1200px;margin-inline:auto;padding-inline:24px}
.io-section{padding-block:clamp(50px,8vw,120px)}
.io-section.io-hero{text-align:center;padding-top:calc(var(--nav-h) + clamp(20px,4vw,48px))}
.io-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cap,#3B6FE0)}
.io-h1{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(2.8rem,8vw,5.8rem);line-height:.98;letter-spacing:-.038em;margin:20px auto;max-width:17ch;color:var(--ink)}
.io-lead{font-family:'Instrument Sans',sans-serif;font-size:clamp(1.12rem,2.2vw,1.6rem);line-height:1.35;color:var(--ink-soft);max-width:30ch;margin:0 auto;font-weight:500}
.io-hero-media{margin-top:clamp(30px,4vw,56px);position:relative;display:block;text-align:center}
.io-hero-media img{max-width:100%;width:100%;height:auto;filter:drop-shadow(0 22px 46px rgba(22,22,45,.15))}

.io-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px);text-align:center;margin-top:clamp(30px,4vw,52px)}
.io-stat b{display:block;font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.9rem,4.4vw,3.7rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.io-stat span{display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.io-head{max-width:820px}
.io-kicker{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cap,#3B6FE0)}
.io-kicker::before{content:"";width:28px;height:2px;background:var(--cap,#3B6FE0)}
.io-title{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.032em;margin:18px 0 14px;color:var(--ink)}
.io-sub{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.5;color:var(--muted);max-width:54ch}
.io-statement{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.18;letter-spacing:-.025em;color:var(--ink);max-width:22ch;margin-inline:auto;text-align:center}
.io-statement b{color:var(--muted);font-weight:600}

/* horizontal scroller — LIGHT image-forward cards for transparent mockups */
.io-scroller{margin-top:clamp(28px,4vw,48px)}
.io-hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,400px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-block:6px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.io-hscroll::-webkit-scrollbar{display:none}
.io-hscroll>*{scroll-snap-align:start}
.io-lcard{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.io-lcard .lc-media{position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:20px;background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb,var(--cap,#3B6FE0) 12%, var(--paper-2)), var(--paper-2))}
.io-lcard .lc-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 28px rgba(22,22,45,.16))}
.io-lcard .lc-body{padding:clamp(22px,2.4vw,30px)}
.io-lcard .lc-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--cap,#3B6FE0) 12%,#fff);color:var(--cap,#3B6FE0);margin-bottom:16px}
.io-lcard .lc-ic svg{width:22px;height:22px}
.io-lcard .lc-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cap,#3B6FE0);margin-bottom:9px}
.io-lcard h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.05;margin-bottom:10px;color:var(--ink)}
.io-lcard p{font-size:.96rem;line-height:1.5;color:var(--muted)}
.io-nav-row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-inline:var(--gutter)}
.io-nav{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .3s,opacity .3s}
.io-nav svg{width:20px;height:20px}
.io-nav:hover{background:var(--card)}
.io-nav:disabled{opacity:.3;cursor:default}

/* alternating big blocks — real mockup on soft stage */
.io-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(32px,5vw,76px)}
.io-block:first-of-type{margin-top:clamp(28px,4vw,52px)}
.io-block.flip .io-block-media{order:2}
.io-block-media{position:relative;border-radius:26px;padding:clamp(20px,3vw,44px);display:grid;place-items:center;background:radial-gradient(120% 125% at 50% 0%, color-mix(in srgb,var(--cap,#3B6FE0) 12%, var(--paper-2)), var(--paper-2))}
.io-block-media img{max-width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(22,22,45,.16))}
.io-block-text h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.1vw,2.5rem);letter-spacing:-.028em;line-height:1.04;margin-bottom:16px;color:var(--ink)}
.io-block-text p{font-size:clamp(1.03rem,1.5vw,1.2rem);line-height:1.55;color:var(--muted);max-width:44ch;margin-bottom:20px}
.io-feat{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-top:22px}
.io-feat .ift{padding-left:16px;border-left:2px solid color-mix(in srgb,var(--cap,#3B6FE0) 40%,transparent)}
.io-feat .ift b{display:block;font-size:.94rem;font-weight:600;color:var(--ink);margin-bottom:5px}
.io-feat .ift span{font-size:.86rem;color:var(--muted);line-height:1.5}

/* highlight grid */
.io-hl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,48px)}
.io-hl-card{position:relative;border-radius:24px;background:var(--card);border:1px solid var(--line);padding:clamp(24px,3vw,40px);transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.io-hl-card:hover{transform:translateY(-6px);background:var(--card-2)}
.io-hl-card .hl-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:color-mix(in srgb,var(--cap,#3B6FE0) 12%,#fff);color:var(--cap,#3B6FE0);margin-bottom:18px}
.io-hl-card .hl-ic svg{width:25px;height:25px}
.io-hl-card h3{font-family:'Instrument Sans',sans-serif;font-weight:700;font-size:clamp(1.25rem,1.8vw,1.5rem);letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.io-hl-card p{color:var(--muted);font-size:.97rem;line-height:1.55}

@media(max-width:820px){
  .io-nav-row{display:none}
  .io-block,.io-block.flip{grid-template-columns:1fr;gap:22px}
  .io-block.flip .io-block-media{order:0}
  .io-hl{grid-template-columns:1fr}
  .io-feat{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.io-stats{grid-template-columns:1fr 1fr;gap:24px 16px}.io-feat{grid-template-columns:1fr}}