*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3,h4{font-family:'Manrope',sans-serif; margin:0; letter-spacing:-0.02em;}
  p{margin:0; line-height:1.65;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
  section{position:relative;}
  ::selection{background:var(--ms-blue); color:#fff;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal-stagger.in > *{opacity:1; transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.04s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.20s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.28s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.36s;}

  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ms-blue); margin-bottom:16px;}
  .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--ms-blue);}
  .eyebrow.on-dark{color:#5CC8FF;} .eyebrow.on-dark::before{background:#5CC8FF;}

  /* ---------- HERO ---------- */
  .hero{padding:84px 0 60px; overflow:hidden;
    background:radial-gradient(900px 560px at 74% 22%, rgba(0,164,239,.10), transparent 62%),
               radial-gradient(620px 460px at 6% 88%, rgba(255,185,0,.08), transparent 60%);}
  .hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
  .crumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace; margin-bottom:22px;}
  .crumb svg{width:11px; height:11px;}
  .hero h1{font-size:clamp(36px,4.4vw,52px); line-height:1.08; font-weight:800; letter-spacing:-.03em;}
  .hero h1 .ms-grad{background:linear-gradient(100deg, var(--ms-blue), var(--ms-green) 40%, var(--ms-yellow) 70%, var(--ms-red)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero p.sub{margin-top:20px; font-size:16.5px; color:var(--ink-soft); max-width:470px;}
  .hero .cta-row{display:flex; gap:14px; margin-top:32px;}
  .ms-badge{display:inline-flex; align-items:center; gap:10px; margin-top:38px; padding:10px 18px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:12.5px; font-weight:600; color:var(--ink-soft);}
  .ms-badge .sq{display:grid; grid-template-columns:1fr 1fr; gap:2px; width:16px; height:16px;}
  .ms-badge .sq i{display:block; width:7px; height:7px;}

  /* Hero tile-grid visual — four platforms laid out as the Microsoft square */
  .msgrid{position:relative; height:470px; display:flex; align-items:center; justify-content:center; perspective:1500px;}
  .msgrid-inner{position:relative; width:392px; height:392px; transform-style:preserve-3d; transition:transform .5s var(--ease);}
  .msgrid-dots{position:absolute; inset:-60px; z-index:0;
    background-image:radial-gradient(circle, rgba(0,164,239,.13) 1px, transparent 1px); background-size:24px 24px;
    mask-image:radial-gradient(ellipse 68% 68% at 50% 50%, black 5%, transparent 76%);}
  .msgrid svg.loop{position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); z-index:1; overflow:visible;}
  .loop-path{fill:none; stroke:rgba(0,164,239,.35); stroke-width:1.5; stroke-dasharray:7 9; animation:loopdash 22s linear infinite;}
  @keyframes loopdash{to{stroke-dashoffset:-320;}}

  .tiles{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:18px; z-index:2;}
  .tile{position:relative; background:#fff; border-radius:16px; box-shadow:var(--shadow-md); padding:20px 20px 18px;
    display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
    animation:tilebreathe 7s ease-in-out infinite; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
  .tile:hover{transform:translateY(-6px) scale(1.03); box-shadow:var(--shadow-lg); z-index:8;}
  .tile::after{content:''; position:absolute; top:0; left:0; width:100%; height:3px;}
  .tile::before{content:''; position:absolute; bottom:-40px; right:-40px; width:120px; height:120px; border-radius:50%; opacity:.07; transition:opacity .35s ease;}
  .tile:hover::before{opacity:.16;}
  @keyframes tilebreathe{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
  .tile:nth-child(1){animation-delay:0s;}
  .tile:nth-child(2){animation-delay:-1.75s;}
  .tile:nth-child(3){animation-delay:-5.25s;}
  .tile:nth-child(4){animation-delay:-3.5s;}
  .tile .t-icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;}
  .tile .t-icon svg{width:16px; height:16px; stroke:#fff;}
  .tile .t-meta{position:relative; z-index:1;}
  .tile b{font-size:12.5px; font-weight:800; display:block; line-height:1.3; font-family:'Manrope',sans-serif;}
  .tile span{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
  .tile .t-bar{height:3px; border-radius:2px; background:var(--bg-alt); margin-top:11px; overflow:hidden;}
  .tile .t-bar i{display:block; height:100%; width:35%; border-radius:2px; animation:barfill 5s ease-in-out infinite;}
  @keyframes barfill{0%,100%{width:32%;} 50%{width:88%;}}
  .t-red::after, .t-red::before{background:var(--ms-red);} .t-red .t-icon{background:linear-gradient(135deg,#FF7A52,var(--ms-red));} .t-red .t-bar i{background:var(--ms-red);}
  .t-green::after, .t-green::before{background:var(--ms-green);} .t-green .t-icon{background:linear-gradient(135deg,#A8D93B,var(--ms-green));} .t-green .t-bar i{background:var(--ms-green); animation-delay:-1.2s;}
  .t-blue::after, .t-blue::before{background:var(--ms-blue);} .t-blue .t-icon{background:linear-gradient(135deg,#4CC6FF,var(--ms-blue));} .t-blue .t-bar i{background:var(--ms-blue); animation-delay:-2.4s;}
  .t-yellow::after, .t-yellow::before{background:var(--ms-yellow);} .t-yellow .t-icon{background:linear-gradient(135deg,#FFD34D,var(--ms-yellow));} .t-yellow .t-bar i{background:var(--ms-yellow); animation-delay:-3.6s;}

  .grid-hub{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:82px; height:82px; border-radius:50%;
    background:#fff; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9; text-align:center;}
  .grid-hub::before{content:''; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(0,164,239,.25); animation:hubpulse 3.4s ease-in-out infinite;}
  @keyframes hubpulse{0%,100%{transform:scale(1); opacity:.7;} 50%{transform:scale(1.09); opacity:.25;}}
  .grid-hub .ms-tiles{display:grid; grid-template-columns:1fr 1fr; gap:2.5px; margin-bottom:6px;}
  .grid-hub .ms-tiles i{display:block; width:9px; height:9px; animation:tileblink 4s ease-in-out infinite;}
  .grid-hub .ms-tiles i:nth-child(1){background:var(--ms-red);}
  .grid-hub .ms-tiles i:nth-child(2){background:var(--ms-green); animation-delay:.4s;}
  .grid-hub .ms-tiles i:nth-child(3){background:var(--ms-blue); animation-delay:.8s;}
  .grid-hub .ms-tiles i:nth-child(4){background:var(--ms-yellow); animation-delay:1.2s;}
  @keyframes tileblink{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.5; transform:scale(.88);}}
  .grid-hub b{font-size:9px; font-weight:800; font-family:'IBM Plex Mono',monospace; letter-spacing:.04em; color:var(--ink-soft);}

  /* ---------- SECTION SHARED ---------- */
  .sec-head{max-width:640px; margin-bottom:52px;}
  .sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .sec-head h2{font-size:clamp(28px,3.2vw,38px); font-weight:800;}
  .sec-head p{margin-top:14px; font-size:16px; color:var(--ink-soft);}
  .section-pad{padding:100px 0;}

  /* ---------- CONCEPT / STACK ---------- */
  .concept{background:radial-gradient(1100px 640px at 78% -12%, var(--blue-deep-2), var(--blue-deep) 66%); color:#fff; overflow:hidden;}
  .concept .grid-lines{position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 80%);}
  .concept .sec-head p{color:rgba(255,255,255,.62);}
  .stack{position:relative; z-index:1; max-width:840px; margin:0 auto;}
  .stack-layer{border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:22px 26px; margin-bottom:14px; background:rgba(255,255,255,.045); backdrop-filter:blur(8px); display:flex; align-items:center; gap:22px; transition:all .35s var(--ease); position:relative; overflow:hidden;}
  .stack-layer:hover{background:rgba(255,255,255,.08); border-color:rgba(92,200,255,.45); transform:translateX(6px);}
  .stack-layer .sl-num{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#5CC8FF; width:26px; flex-shrink:0;}
  .stack-layer .sl-body{flex:1;}
  .stack-layer h4{font-size:16px; font-weight:700; margin-bottom:5px;}
  .stack-layer p{font-size:13.5px; color:rgba(255,255,255,.58); line-height:1.55;}
  .stack-layer .sl-chips{display:flex; gap:7px; flex-wrap:wrap; flex-shrink:0; max-width:280px; justify-content:flex-end;}
  .sl-chip{font-size:10.5px; font-family:'IBM Plex Mono',monospace; padding:5px 10px; border-radius:6px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.72); white-space:nowrap;}
  .stack-arrow{display:flex; justify-content:center; padding:2px 0 6px;}
  .stack-arrow svg{width:16px; height:16px; stroke:rgba(255,255,255,.3); animation:arrowbob 2.4s ease-in-out infinite;}
  @keyframes arrowbob{0%,100%{transform:translateY(0); opacity:.4;} 50%{transform:translateY(4px); opacity:.9;}}

  /* ---------- SOLUTIONS BENTO ---------- */
  .ms-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .ms-card{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:34px 32px; overflow:hidden; transition:all .35s var(--ease); display:flex; flex-direction:column; min-height:230px;}
  .ms-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
  .ms-card:hover::before{transform:scaleX(1);}
  .ms-card::after{content:''; position:absolute; top:-70px; right:-70px; width:190px; height:190px; border-radius:50%; opacity:0; transition:opacity .4s ease;}
  .ms-card:hover::after{opacity:.09;}
  .ms-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent;}
  .ms-card .mc-icon{width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .35s var(--ease);}
  .ms-card:hover .mc-icon{transform:scale(1.08) rotate(-4deg);}
  .ms-card .mc-icon svg{width:23px; height:23px; stroke:#fff;}
  .ms-card h3{font-size:19px; font-weight:700; margin-bottom:9px;}
  .ms-card p{font-size:14px; color:var(--ink-soft); max-width:340px;}
  .ms-card .mc-tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:16px;}
  .mc-tag{font-size:10.5px; font-family:'IBM Plex Mono',monospace; padding:5px 10px; border-radius:6px; background:var(--bg-alt); color:var(--ink-soft);}
  .ms-card .mc-link{display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:22px; font-size:13.5px; font-weight:700;}
  .ms-card .mc-link svg{width:14px; height:14px; transition:transform .25s ease;}
  .ms-card:hover .mc-link svg{transform:translateX(4px);}
  .c-red::before, .c-red::after{background:var(--ms-red);} .c-red .mc-icon{background:linear-gradient(135deg,#FF7A52,var(--ms-red));} .c-red .mc-link{color:var(--ms-red);}
  .c-blue::before, .c-blue::after{background:var(--ms-blue);} .c-blue .mc-icon{background:linear-gradient(135deg,#4CC6FF,var(--ms-blue));} .c-blue .mc-link{color:#0084C2;}
  .c-green::before, .c-green::after{background:var(--ms-green);} .c-green .mc-icon{background:linear-gradient(135deg,#A8D93B,var(--ms-green));} .c-green .mc-link{color:#5E8A00;}
  .c-yellow::before, .c-yellow::after{background:var(--ms-yellow);} .c-yellow .mc-icon{background:linear-gradient(135deg,#FFD34D,var(--ms-yellow));} .c-yellow .mc-link{color:#B58200;}

  /* ---------- OUTCOMES STRIP ---------- */
  .outcomes{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .outcome{padding:34px 28px; border-right:1px solid var(--line); transition:background .3s ease;}
  .outcome:last-child{border-right:none;}
  .outcome:hover{background:var(--bg-alt);}
  .outcome .oc-icon{width:34px; height:34px; border-radius:9px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
  .outcome .oc-icon svg{width:16px; height:16px;}
  .outcome h4{font-size:14.5px; font-weight:700; margin-bottom:7px;}
  .outcome p{font-size:12.5px; color:var(--ink-soft); line-height:1.55;}

  /* ---------- CTA ---------- */
  .cta{background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-ink) 100%); color:#fff; text-align:center; padding:110px 0; overflow:hidden;}
  .cta::before{content:''; position:absolute; width:560px; height:560px; border-radius:50%; top:-280px; right:-180px; background:radial-gradient(circle, rgba(0,164,239,.2), transparent 70%);}
  .cta::after{content:''; position:absolute; width:440px; height:440px; border-radius:50%; bottom:-240px; left:-140px; background:radial-gradient(circle, rgba(255,185,0,.13), transparent 70%);}
  .cta .content{position:relative; z-index:2;}
  .cta h2{font-size:clamp(27px,3.6vw,40px); font-weight:800; max-width:640px; margin:0 auto 16px;}
  .cta p{color:rgba(255,255,255,.62); font-size:16px; margin-bottom:34px;}
  .cta .cta-row{display:flex; gap:14px; justify-content:center;}

  @media (max-width:1024px){
    .wrap{padding:0 22px;}
    .hero .wrap{grid-template-columns:1fr;}
    .msgrid{height:380px;}
    .msgrid-inner{width:310px; height:310px;}
    .tiles{gap:14px;}
    .tile{padding:15px;}
    .tile b{font-size:11.5px;}
    .grid-hub{width:68px; height:68px;}
    .ms-grid{grid-template-columns:1fr;}
    .outcomes{grid-template-columns:repeat(2,1fr);}
    .outcome:nth-child(2){border-right:none;}
    .outcome:nth-child(1),.outcome:nth-child(2){border-bottom:1px solid var(--line);}
    .stack-layer{flex-direction:column; align-items:flex-start; gap:14px;}
    .stack-layer .sl-chips{justify-content:flex-start; max-width:none;}
    .foot-grid{grid-template-columns:repeat(2,1fr);}
  }