1<!DOCTYPE html><html lang="en" data-theme="royal-blue"><head> 2<meta charset="UTF-8"> 3<meta name="viewport" content="width=device-width, initial-scale=1.0"> 4<title>Armakuni | The engineering partner for the AI era. AWS Premier.</title> 5<link rel="preconnect" href="https://fonts.googleapis.com"> 6<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> 7<link href="https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@200;300&family=Inter:wght@350;400;500&family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
8<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
vendor: 1 bytes, line 8
8
9<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
9 10 11<style> 12/* ======================================== 13 0. TOKENS 14 ======================================== */ 15:root { 16 --bg: #05050c; 17 --surface: rgba(255,255,255,0.03); 18 --surface-2: rgba(255,255,255,0.04); 19 --surface-card: rgba(255,255,255,0.025); 20 --text: #ebf1fb; 21 --text-s: rgba(235,241,251,0.72); 22 --text-m: rgba(235,241,251,0.45); 23 --border: rgba(255,255,255,0.07); 24 --border-h: rgba(255,255,255,0.14); 25 --accent-cyan: #009be5; 26 --accent-pink: #dd23bb; 27 --aws: #FF9900; 28 --aws-soft: rgba(255,153,0,0.12); 29 --logo-blue: #009FE3; 30 --logo-green: #95C11F; 31 --logo-orange: #F07B20; 32 --logo-coral: #C2004B; 33 --logo-pink: #E6007E; 34 --accent-a04: color-mix(in srgb, var(--accent) 4%, transparent); 35 --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent); 36 --accent-a08: color-mix(in srgb, var(--accent) 8%, transparent); 37 --accent-a12: color-mix(in srgb, var(--accent) 12%, transparent); 38 --accent-a15: color-mix(in srgb, var(--accent) 15%, transparent); 39 --accent-a18: color-mix(in srgb, var(--accent) 18%, transparent); 40 --accent-a26: color-mix(in srgb, var(--accent) 26%, transparent); 41 --accent-a45: color-mix(in srgb, var(--accent) 45%, transparent); 42 --r-sm: 10px; 43 --r-md: 16px; 44 --r-lg: 24px; 45 --f-h: 'Saira Semi Condensed', sans-serif; 46 --f-b: 'Inter', sans-serif; 47 --f-m: 'Roboto Mono', monospace; 48 --ease: cubic-bezier(0.4, 0, 0.2, 1); 49 --ease-glow: cubic-bezier(0.22, 1, 0.36, 1); 50 --ease-menu: cubic-bezier(0.16, 1, 0.3, 1); 51 --trust-strip-h: 0px; /* trust strip removed; kept token at 0 so hero offset math stays valid */ 52 --nav-h: 68px; 53} 54 55/* ======================================== 56 1. RESET & BASE 57 ======================================== */ 58*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 59html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 60body { 61 font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65; 62 color: var(--text); background-color: var(--bg); 63 background: 64 radial-gradient(circle at 14% 12%, var(--accent-a15), transparent 24%), 65 radial-gradient(circle at 84% 18%, rgba(0,155,229,0.09), transparent 24%), 66 radial-gradient(circle at 50% 80%, var(--accent-a08), transparent 22%), 67 linear-gradient(180deg, #04040a, #05050c 38%, #070c15 100%); 68 background-attachment: fixed; 69 overflow-x: hidden; 70 opacity: 0; 71 transition: opacity 0.6s var(--ease); 72} 73body.loaded { opacity: 1; } 74a { color: inherit; text-decoration: none; } 75button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } 76img { max-width: 100%; display: block; } 77ul, ol { list-style: none; } 78 79/* ======================================== 80 2. BACKGROUND ORNAMENTS 81 ======================================== */ 82.bg-dot-grid { 83 position: fixed; inset: 0; z-index: 0; pointer-events: none; 84 background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); 85 background-size: 24px 24px; 86 mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 100%); 87} 88.bg-continuity-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } 89.bg-continuity-lines::before, .bg-continuity-lines::after { 90 content: ''; position: absolute; top: 0; bottom: 0; width: 1px; 91 background: linear-gradient(180deg, transparent 0%, transparent 14%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0.06) 90%, transparent 100%); 92} 93.bg-continuity-lines::before { left: max(24px, calc((100vw - 1100px) / 2)); } 94.bg-continuity-lines::after { right: max(24px, calc((100vw - 1100px) / 2)); } 95.bg-line-center { 96 position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 0; pointer-events: none; 97 background: linear-gradient(180deg, transparent 0%, var(--accent-a08) 15%, rgba(255,255,255,0.05) 50%, var(--accent-a08) 85%, transparent 100%); 98} 99.scroll-progress { 100 position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 10000; 101 background: linear-gradient(90deg, var(--accent), var(--accent-cyan)); 102} 103.fog-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } 104.fog-blob { position: absolute; border-radius: 50%; filter: blur(92px); opacity: 0.5; } 105.fog-blob-1 { width: 420px; height: 420px; background: var(--accent-a08); top: 10%; left: 8%; animation: fd1 28s ease-in-out infinite; } 106.fog-blob-2 { width: 360px; height: 360px; background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); top: 30%;
106 right: 12%; animation: fd2 32s ease-in-out infinite; } 107.fog-blob-3 { width: 300px; height: 300px; background: var(--accent-a06); bottom: 20%; left: 40%; animation: fd3 26s ease-in-out infinite; } 108@keyframes fd1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,40px) scale(1.1); } 66% { transform: translate(-30px,70px) scale(0.95); } } 109@keyframes fd2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-50px,-30px) scale(1.05); } 66% { transform: translate(40px,-60px) scale(0.9); } } 110@keyframes fd3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.08); } 66% { transform: translate(-40px,30px) scale(0.92); } } 111.mouse-glow { 112 position: fixed; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 1; 113 background: radial-gradient(circle, var(--accent-a06), transparent 70%); 114 transform: translate(-50%, -50%); transition: left 0.3s var(--ease), top 0.3s var(--ease); 115} 116@media (hover: none), (pointer: coarse) { .mouse-glow { display: none; } } 117 118/* ======================================== 119 3. TRUST STRIP (NEW - above nav) 120 Component: trust-strip 121 Thin certifications band - proves credibility before the pitch. 122 ======================================== */ 123.trust-strip { 124 position: fixed; top: 0; left: 0; right: 0; z-index: 1001; 125 height: var(--trust-strip-h); 126 background: linear-gradient(180deg, rgba(3,4,10,0.95), rgba(5,6,14,0.88)); 127 border-bottom: 1px solid var(--border); 128 backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); 129 overflow: hidden; 130} 131.trust-strip-track { 132 display: flex; align-items: center; gap: 36px; 133 height: 100%; padding: 0 24px; 134 white-space: nowrap; 135 font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; 136 animation: trustMarquee 48s linear infinite; 137 will-change: transform; 138} 139.trust-item { 140 display: inline-flex; align-items: center; gap: 10px; color: var(--text-s); flex-shrink: 0; 141} 142.trust-item::before { 143 content: ''; width: 6px; height: 6px; border-radius: 50%; 144 background: var(--aws); 145 box-shadow: 0 0 8px color-mix(in srgb, var(--aws) 40%, transparent); 146} 147.trust-item.t-aws::before { background: var(--aws); box-shadow: 0 0 8px rgba(255,153,0,0.5); } 148.trust-item.t-tt::before { background: var(--logo-green); box-shadow: 0 0 8px rgba(149,193,31,0.5); } 149.trust-item.t-sca::before { background: var(--accent-bright); box-shadow: 0 0 8px rgba(123,198,255,0.5); } 150@keyframes trustMarquee { 151 from { transform: translateX(0); } 152 to { transform: translateX(-50%); } 153} 154 155/* ======================================== 156 4. NAV (glass pill - offset below trust strip) 157 ======================================== */ 158.nav { 159 position: fixed; top: 14px; left: 50%; transform: translateX(-50%); 160 width: min(1060px, calc(100vw - 18px)); z-index: 1000; border-radius: 18px; 161 border: 1px solid var(--border); background: rgba(8,12,20,0.68); 162 backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); 163 box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.28); 164 display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 12px 14px; 165} 166.nav-brand { display: flex; align-items: center; gap: 10px; } 167.brand-name { font-family: var(--f-h); font-weight: 200; font-size: 18px; letter-spacing: 0.02em; } 168.nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; } 169.nav-link { 170 font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase; 171 letter-spacing: 0.1em; color: var(--text-m); padding: 6px 12px; border-radius: 8px; 172 position: relative; transition: color 0.25s var(--ease); 173} 174.nav-link::after { 175 content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 1px; 176 background: linear-gradient(90deg, var(--accent), var(--accent-cyan)); 177 transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); 178} 179.nav-link:hover { color: var(--text); } 180.nav-link:hover::after { transform: scaleX(1); } 181.nav-cta { 182 font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase; 183 letter-spacing: 0.08em; padding: 8px 16px; border-radius: var(--r-sm); 184 border: 1px solid var(--accent-a26); 185 background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06)); 186 box-shadow: inset 0 0 12px 4px var(--accent-a06), 0 0 16px var(--accent-a04); 187 color: var(--text); white-space: nowrap; 188 transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease); 189} 190.nav-cta:hover { 191 border-color: var(--accent-a45); 192 background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12)); 193 box-shadow: inset 0 0 20px 6px var(--accent-a12), 0 0 32px var(--accent-a12); 194 transform: translateY(-1px); 195} 196 197/* ======================================== 198 5. LAYOUT PRIMITIVES + REVEAL + BUTTONS 199 ======================================== */ 200.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } 201.wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; } 202section { position: relative; } 203h2 { 204 font-family: var(--f-h); font-weight: 200; font-size: clamp(28px, 3vw, 38px); 205 line-height: 1.15; color: var(--text); margin-bottom: 18px; 206} 207.lead { font-size: 16px; color: var(--text-s); line-height: 1.78; max-width: 680px; } 208.eyebrow { 209 display: inline-block; 210 font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; 211 color: var(--accent-bright); margin-bottom: 18px; 212 position: relative; padding-left: 26px; 213} 214.eyebrow::before { 215 content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); 216 width: 16px; height: 1px; background: var(--accent-bright); 217} 218 219.reveal { 220 opacity: 0; transform: translateY(16px); filter: blur(6px); 221 transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), filter 0.65s var(--ease); 222} 223.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } 224.reveal[data-delay="1"] { transition-delay: 0.08s; } 225.reveal[data-delay="2"] { transition-delay: 0.16s; } 226.reveal[data-delay="3"] { transition-delay: 0.24s; } 227.reveal[data-delay="4"] { transition-delay: 0.32s; } 228.reveal[data-delay="5"] { transition-delay: 0.40s; } 229 230.btn { 231 display: inline-flex; align-items: center; gap: 8px; 232 border: 1px solid var(--accent-a26); 233 background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06)); 234 border-radius: 12px; padding: 12px 24px; 235 font-family: var(--f-m); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); 236 transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease); 237} 238.btn:hover { 239 border-color: var(--accent-a45); 240 background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12)); 241 box-shadow: inset 0 0 24px 8px var(--accent-a12), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px var(--accent-a12), 0 4px 16px var(--accent-a08); 242 transform: translateY(-2px) scale(1.02); 243} 244.btn:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; } 245.btn-ghost { 246 background: var(--surface); border-color: var(--border); 247} 248.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-h); box-shadow: none; } 249.arr { display: inline-block; transition: transform 0.25s var(--ease); } 250.btn:hover .arr { transform: translateX(4px); } 251.btn-glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; } 252@keyframes glowPulse { 253 0%, 100% { box-shadow: inset 0 0 16px 6px var(--accent-a06), 0 0 24px var(--accent-a04); } 254 50% { box-shadow: inset 0 0 24px 8px var(--accent-a12), 0 0 60px var(--accent-a15), 0 0 30px var(--accent-a08); } 255} 256.link-secondary { 257 font-family: var(--f-b); font-size: 15px; color: var(--text-s); 258 transition: color 0.25s var(--ease); border-bottom: 1px solid transparent; 259} 260.link-secondary:hover { color: var(--text); border-bottom-color: var(--accent); } 261 262/* ======================================== 263 6. HERO - Fluid Ink (dark) + category + tagline + concrete what 264 ======================================== */ 265.hero { 266 position: relative; overflow: hidden; 267 /* Cap hero height on tall screens. Without the cap, 100vh on a 1440px-tall 268 monitor leaves the centered content marooned in the middle with too much 269 dead space top + bottom. Cap at 820px so the hero feels purposeful on 270 desktop and laptop, while still filling the viewport on phones / tablets. */ 271 min-height: min(100dvh, 820px); min-height: min(100vh, 820px); 272 display: flex; flex-direction: column; justify-content: center; 273 padding: calc(var(--trust-strip-h) + var(--nav-h) + 56px) 0 56px; 274} 275.hero-bg-fallback { 276 position: absolute; inset: 0; z-index: 0; pointer-events: none; 277 background:
278 radial-gradient(1200px 800px at 78% 40%, rgba(28,62,160,0.6), transparent 65%), 279 radial-gradient(900px 600px at 85% 55%, rgba(18,30,85,0.55), transparent 70%), 280 radial-gradient(1400px 900px at 95% 30%, rgba(10,16,40,0.7), transparent 75%); 281} 282.hero-bg-canvas { 283 position: absolute; inset: 0; z-index: 0; 284 width: 100%; height: 100%; 285 /* pointer-events auto so the canvas receives mouse movement; buttons still click. */ 286} 287/* Content wrapper is transparent to the mouse; only interactive children opt in. 288 This lets the hero BG shader feel the cursor across the full viewport. */ 289.hero-content { pointer-events: none; } 290.hero-content .btn, .hero-content .nav-cta, .hero-content a { pointer-events: auto; } 291.hero-bg-tint { 292 position: absolute; inset: 0; z-index: 1; pointer-events: none; 293 /* A soft bottom vignette so the shader reads darker at the bottom of the fold */ 294 background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(5,5,12,0.55) 100%); 295} 296.hero-fade { 297 position: absolute; inset: 0; z-index: 1; pointer-events: none; 298 background: linear-gradient(90deg, rgba(5,5,12,0.85) 0%, rgba(5,5,12,0.55) 38%, rgba(5,5,12,0.18) 60%, transparent 78%); 299} 300.hero-grid { 301 position: absolute; inset: 0; z-index: 1; pointer-events: none; 302 background-image: 303 linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 304 linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); 305 background-size: 72px 72px; 306 mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 0%, transparent 100%); 307} 308.hero-content { position: relative; z-index: 2; max-width: 900px; } 309.hero h1 { 310 font-family: var(--f-h); font-weight: 200; 311 font-size: clamp(34px, 4vw, 52px); 312 line-height: 1.06; letter-spacing: -0.01em; margin-bottom: 28px; 313 /* 2026-05-09: cap hero headline width to ~4 words per line */ 314 max-width: 720px; text-wrap: balance; 315} 316.hero-what { 317 font-family: var(--f-h); font-weight: 200; 318 font-size: clamp(18px, 1.8vw, 22px); 319 line-height: 1.45; color: var(--text-s); 320 max-width: 680px; margin-bottom: 20px; 321} 322.hero-what strong { color: var(--accent-bright); font-weight: 300; } 323.hero-sub { font-size: 16px; color: var(--text-m); line-height: 1.7; max-width: 620px; margin-bottom: 36px; } 324.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } 325.hero-trust-note { 326 font-family: var(--f-m); font-size: 11px; color: var(--text-m); 327 text-transform: uppercase; letter-spacing: 0.1em; 328 margin-left: 16px; display: inline-flex; align-items: center; gap: 8px; 329} 330.hero-trust-note::before { 331 content: ''; width: 4px; height: 4px; border-radius: 50%; 332 background: var(--aws); box-shadow: 0 0 6px rgba(255,153,0,0.6); 333 animation: pulseDot 2s ease-in-out infinite; 334} 335@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } 336a.hero-trust-note { text-decoration: none; cursor: pointer; transition: color 0.2s var(--ease); } 337a.hero-trust-note:hover { color: var(--text); } 338.hero-trust-note .arr { display: inline-block; transition: transform 0.25s var(--ease); } 339.hero-trust-note:hover .arr { transform: translateX(4px); } 340 341/* Char glow */ 342.char { display: inline; } 343[data-char-glow] .char { 344 display: inline; opacity: 0.25; color: var(--accent-bright); text-shadow: none; 345 transition: opacity 0.5s var(--ease-glow), color 0.5s var(--ease-glow), text-shadow 0.5s var(--ease-glow); 346} 347[data-char-glow] .char.lit { 348 opacity: 1; color: var(--text); 349 text-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 60%, transparent), 0 0 24px var(--accent-a18); 350} 351[data-char-glow] .char.settled { 352 opacity: 1; color: var(--text); text-shadow: none; 353 transition: text-shadow 0.6s var(--ease-glow); 354} 355 356/* ======================================== 357 7. LOGO WALL (NEW component - dedicated trust band) 358 ======================================== */ 359.logo-wall { 360 padding: 48px 0 56px; 361 background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 40%, transparent); 362 border-top: 1px solid var(--border); 363 border-bottom: 1px solid var(--border); 364 overflow: hidden; 365} 366.logo-wall-lbl { 367 font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; 368 color: var(--text-m); text-align: center; margin-bottom: 32px; 369} 370.logo-wall-lbl strong { color: var(--text-s); font-weight: 400; } 371.logo-marquee { 372 position: relative; 373 mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); 374 -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); 375} 376.logo-marquee-track { 377 display: flex; align-items: center; gap: 56px; 378 width: max-content; 379 animation: logoScroll 480s linear infinite; 380} 381.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; } 382.logo-name { 383 font-family: var(--f-h); font-weight: 300; font-size: 22px; 384 color: var(--text-m); letter-spacing: 0.02em; 385 opacity: 0.6; white-space: nowrap;
386 transition: opacity 0.3s var(--ease), color 0.3s var(--ease); 387 flex-shrink: 0; 388} 389.logo-name:hover { opacity: 1; color: var(--text); } 390@keyframes logoScroll { 391 from { transform: translateX(0); } 392 to { transform: translateX(-50%); } 393} 394 395/* ======================================== 396 8. CASE STUDY CAROUSEL (tm-sec from master design system) 397 Component: testimonial-carousel (design-system.html :3133) 398 ======================================== */ 399.tm-sec { position: relative; overflow: hidden; padding: 88px 0 72px; } 400.tm-head { text-align: center; margin-bottom: 32px; } 401.tm-head .eyebrow { margin-left: auto; margin-right: auto; } 402.tm-head h2 { max-width: 780px; margin: 8px auto 0; } 403.tm-glow { 404 position: absolute; left: 50%; transform: translateX(-50%); 405 width: min(1100px, 85vw); height: 240px; bottom: 0; 406 background: radial-gradient(ellipse at center, var(--accent-a08), transparent 70%); 407 pointer-events: none; z-index: 0; filter: blur(40px); 408} 409/* tm-viewport: full-bleed clipped frame; tm-track: flex container that 410 translates left/right under JS control. Avoids native scroll-snap edge 411 bugs and works on every viewport width. */ 412.tm-viewport { 413 position: relative; z-index: 1; 414 overflow: hidden; 415 margin-left: calc(-50vw + 50%); width: 100vw; 416 padding: 20px max(24px, calc((100vw - 820px) / 2)); 417 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); 418 mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%); 419} 420.tm-track { 421 display: flex; gap: 24px; 422 /* Stretch so every slide matches the height of the tallest sibling. The 423 footer's `margin-top: auto` keeps short-quote slides bottom-aligned 424 instead of leaving the footer halfway up the card. Uniform height 425 reads as a polished carousel; staggered heights read as a layout bug. */ 426 align-items: stretch; 427 transition: transform 0.55s cubic-bezier(0.16,1,0.3,1); 428 will-change: transform; 429} 430.tm-nav { 431 display: flex; align-items: center; justify-content: center; 432 gap: 16px; margin-top: 24px; position: relative; z-index: 1; 433} 434.tm-arrow { 435 width: 40px; height: 40px; border-radius: 50%; 436 background: transparent; border: 1px solid #fff; color: #fff; 437 font-size: 16px; display: flex; align-items: center; justify-content: center; 438 transition: border-color 0.2s, color 0.2s, opacity 0.2s; 439 cursor: pointer; 440} 441.tm-arrow:hover, .tm-arrow:active { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; } 442.tm-slide { 443 flex: 0 0 min(820px, calc(100vw - 80px)); 444 padding: 40px 48px; border-radius: 20px; 445 position: relative; overflow: hidden; 446 display: flex; flex-direction: column; 447 background: linear-gradient(170deg, var(--accent-a12) 0%, color-mix(in srgb, var(--accent-cyan) 6%, transparent) 40%, rgba(5,5,12,0.85) 100%); 448 border: 1px solid var(--accent-a18); 449 transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s; 450} 451.tm-slide:not(.active) { opacity: 0.35; transform: scale(0.94); } 452.tm-slide.active { opacity: 1; } 453.tm-slide-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } 454.tm-divider { border: 0; border-top: 1px solid var(--accent-a26); margin: 0 0 28px; } 455.tm-tag { 456 font-family: var(--f-m); font-size: 10px; letter-spacing: 0.16em; 457 text-transform: uppercase; color: var(--accent-bright); 458 padding: 5px 10px; border: 1px solid var(--accent-a26); 459 border-radius: 9999px; background: var(--accent-a04); 460 display: inline-block; margin-left: auto; flex-shrink: 0; 461} 462/* tm-logo-mark: small monochrome customer logo at the top of each slide. 463 `brightness(0) invert(1)` forces any source colour to clean white, so 464 colored AVIFs and pre-whitened PNGs both render uniformly. 465 Use the `.tm-logo-mark--colored` modifier on slides whose source asset 466 doesn't carry alpha and renders as a flat white block under the filter 467 (e.g. logos exported as opaque AVIFs). */ 468.tm-logo-mark { 469 height: 32px; 470 display: flex; 471 align-items: center; 472} 473.tm-logo-mark img { 474 height: 100%; 475 width: auto; 476 max-width: 140px; 477 object-fit: contain; 478 filter: brightness(0) invert(1); 479 opacity: 0.85; 480} 481.tm-logo-mark--colored img { 482 filter: none; 483 opacity: 1; 484} 485.tm-system { display: none; } 486.tm-metric { display: none; } 487.tm-slide blockquote { 488 font-weight: 350; font-size: 17px; line-height: 1.65; 489 color: rgba(235,241,251,0.9); 490 margin: 0 0 28px; 491 font-style: normal; 492 overflow-wrap: break-word; 493 word-break: normal; 494 hyphens: auto; 495} 496.tm-footer { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; } 497.tm-avatar { 498 width: 44px; height: 44px; border-radius: 50%; 499 background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent)); 500 border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0; 501} 502.tm-name { font-weight: 550; font-size: 15px; color: var(--text); } 503.tm-role { font-size: 13px; color: var(--text-m); margin-top: 3px; } 504 505/* ======================================== 506 9. OFFERINGS - icon-tile-row (canonical, design-system.html #56) 507 modal.com "Powering any ML workload" pattern: 508 accent-tinted container, dark tiles inside, 3D isometric 509 illustration + heading + body + proof. 510 ======================================== */ 511.itr-section { padding: 96px 0; position: relative; } 512.itr-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } 513.itr-head h2 { margin-bottom: 0; } 514.itr-head .lead { max-width: 360px; margin: 0; font-size: 15px; } 515.itr-container { 516 position: relative; 517 overflow: hidden; 518 padding: 10px 0; 519} 520.itr-grid { 521 position: relative; z-index: 1; 522 display: grid; gap: 14px; 523} 524.itr-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } 525.itr-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } 526.itr-tile { 527 /* --offering-accent / --offering-bright are scoped per tile via data-offering-theme below.
528 Default falls back to current accent so uncolored tiles still look right. */ 529 --offering-accent: var(--accent); 530 --offering-bright: var(--accent-bright); 531 background: linear-gradient(180deg, #05070e, #080b18); 532 border: 1px solid var(--border); 533 border-radius: var(--r-md); 534 padding: 20px 18px 22px; 535 display: flex; flex-direction: column; gap: 10px; 536 transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease); 537 position: relative; overflow: hidden; 538 color: var(--text); 539 text-decoration: none; 540} 541/* Per-offering theme preview on hover - clicking through to that offering, user sees the color they're about to enter */ 542.itr-tile[data-offering-theme="blue"] { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; } 543.itr-tile[data-offering-theme="pink"] { --offering-accent: #dd23bb; --offering-bright: #f472b6; } 544.itr-tile[data-offering-theme="cyan"] { --offering-accent: #009be5; --offering-bright: #67e8f9; } 545.itr-tile[data-offering-theme="orange"] { --offering-accent: #F07B20; --offering-bright: #fbbf24; } 546.itr-tile[data-offering-theme="green"] { --offering-accent: #95C11F; --offering-bright: #a3e635; } 547.itr-tile[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; } 548.itr-tile[data-offering-theme="coral"] { --offering-accent: #C2004B; --offering-bright: #E6007E; } 549.itr-tile:hover { 550 border-color: color-mix(in srgb, var(--offering-accent) 45%, transparent); 551 transform: translateY(-4px); 552 background: linear-gradient(180deg, color-mix(in srgb, var(--offering-accent) 8%, #05070e), color-mix(in srgb, var(--offering-accent) 4%, #080b18)); 553 box-shadow: 554 0 12px 40px rgba(0,0,0,0.4), 555 0 0 0 1px color-mix(in srgb, var(--offering-accent) 20%, transparent), 556 0 0 48px color-mix(in srgb, var(--offering-accent) 15%, transparent); 557} 558.itr-tile:hover .itr-name { color: var(--offering-bright); transition: color 0.35s var(--ease); } 559.itr-tile:hover .itr-meta { color: var(--offering-bright); transition: color 0.35s var(--ease); } 560.itr-name, .itr-meta { transition: color 0.35s var(--ease); } 561.itr-img { 562 aspect-ratio: 1 / 1; 563 border-radius: var(--r-sm); 564 overflow: hidden; 565 background: radial-gradient(circle at 50% 50%, var(--accent-a12), transparent 70%); 566 display: flex; align-items: center; justify-content: center; 567 margin-bottom: 8px; 568} 569.itr-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); } 570.itr-tile:hover .itr-img img { transform: scale(1.06); } 571.itr-name { 572 font-family: var(--f-h); font-weight: 200; font-size: 20px; 573 line-height: 1.2; color: var(--text); 574} 575.itr-desc { 576 font-family: var(--f-b); font-weight: 350; font-size: 13.5px; 577 line-height: 1.55; color: var(--text-s); flex: 1; 578} 579.itr-meta { 580 font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.1em; 581 text-transform: uppercase; color: var(--aws); 582 margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); 583} 584 585/* ======================================== 586 10. HORIZONTAL TIMELINE (NEW - slim, replaces vertical) 587 Component: timeline-horizontal 588 ======================================== */ 589.timeline-section-h { 590 padding: 80px 0 88px; position: relative; 591 background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); 592 overflow: hidden; 593} 594.timeline-section-h .eyebrow-wrap { text-align: center; margin-bottom: 12px; } 595.timeline-section-h h2 { text-align: center; max-width: 720px; margin: 0 auto 48px; font-size: clamp(28px, 3vw, 38px); } 596/* Timeline geometry: 597 - Dot is 14px tall (incl 2px border on each side = 18px total) 598 - Dot vertical center = padding-top (28px) + dot-border-top (2px) + dot-radius (7px) = 37px 599 - Line height = 1px; to place its vertical center at 37px set top: 36.5px 600 This guarantees pixel-perfect alignment of the 1px line with the dot centers. */ 601.timeline-track { 602 position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; 603 max-width: 1000px; margin: 0 auto; padding: 28px 0 0; 604} 605.timeline-line { 606 position: absolute; top: 36.5px; left: 7px; right: calc(25% - 31px); height: 1px; 607 background: rgba(255,255,255,0.08); z-index: 0; 608} 609.timeline-line-fill { 610 position: absolute; top: 0; left: 0; height: 100%; width: 0%; 611 background: linear-gradient(90deg, var(--accent-bright), var(--accent-cyan)); 612 box-shadow: 0 0 6px var(--accent-a26); 613} 614.t-era { 615 position: relative; text-align: left; z-index: 1; 616} 617.t-era-dot { 618 width: 14px; height: 14px; border-radius: 50%; 619 margin: 0 0 24px; background: var(--bg); 620 border: 2px solid rgba(255,255,255,0.15); 621 box-sizing: border-box; 622 transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease); 623 position: relative; z-index: 2; 624} 625.t-era.active .t-era-dot { 626 border-color: var(--accent-bright); 627 background: var(--accent-bright); 628 box-shadow: 0 0 14px var(--accent-bright), 0 0 28px var(--accent-a45); 629} 630.t-era-year { 631 font-family: var(--f-m); font-weight: 400; font-size: 22px; color: var(--aws); 632 margin-bottom: 6px; letter-spacing: 0.03em; 633} 634.t-era-headline { 635 font-family: var(--f-h); font-weight: 200; font-size: 15px; line-height: 1.35; 636 color: var(--text); margin-bottom: 4px; max-width: 200px; 637} 638.t-era-note { 639 font-family: var(--f-m); font-size: 10.5px; color: var(--text-m); 640 text-transform: uppercase; letter-spacing: 0.1em; 641} 642
643/* ======================================== 644 11. PROCESS / HOW WE WORK - canonical horizontal process-flow 645 Component: process-flow (design-system.html :2231) 646 ======================================== */ 647.process-section { 648 padding: 96px 0; position: relative; 649 /* No background tint - flat with the rest of the page */ 650 overflow: hidden; 651} 652.process-head { max-width: 820px; margin-bottom: 40px; } 653.process-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: process; position: relative; padding-top: 48px; } 654.process-flow::before { 655 content: ''; position: absolute; top: 24px; left: 6px; right: calc(25% - 21px); height: 1px; 656 background: linear-gradient(90deg, transparent, var(--accent-bright), var(--accent-bright), transparent); 657 opacity: 0.35; z-index: 2; 658} 659.process-step { 660 position: relative; padding: 32px 22px; background: var(--surface-card); 661 border: 1px solid var(--border); border-radius: var(--r-md); 662 opacity: 0.55; transition: opacity 0.5s var(--ease), border-color 0.3s, transform 0.3s; 663 display: flex; flex-direction: column; gap: 10px; 664 overflow: visible; 665} 666.process-step::before { 667 counter-increment: process; content: '0' counter(process); 668 font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; 669 color: var(--accent-bright); display: block; 670} 671.process-step-dot { 672 position: absolute; top: -30px; left: 0; 673 width: 12px; height: 12px; border-radius: 50%; 674 background: var(--bg); 675 border: 2px solid var(--border); z-index: 3; 676 transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s; 677} 678.process-step.active { opacity: 1; border-color: var(--accent-a26); } 679.process-step.active .process-step-dot { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright), 0 0 20px var(--accent-a45); } 680.process-step:hover { transform: translateY(-3px); } 681.process-step h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.25; margin-top: 14px; } 682.process-step p { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); } 683.process-step p strong { color: var(--accent-bright); font-weight: 500; } 684.process-step-metric { 685 font-family: var(--f-m); font-size: 10.5px; color: var(--aws); 686 text-transform: uppercase; letter-spacing: 0.12em; 687 margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); 688} 689 690/* ======================================== 691 12. INDUSTRIES - illustration-dominant tall cards (Retool pattern) 692 Component: industry-illus-carousel (new - design-system.html) 693 Tall 3:4 cards. Illustration fills ~70%. Big title + 1-line hook 694 + metric overlay at the bottom. 695 ======================================== */ 696.industries-section { padding: 96px 0; } 697.industries-head { 698 display: grid; grid-template-columns: 1fr auto; align-items: end; 699 gap: 24px; margin-bottom: 28px; 700} 701.industries-head h2 { 702 font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin-bottom: 0; 703 max-width: 820px; 704} 705.industries-head .lead { margin: 0; font-size: 15px; max-width: 360px; } 706.industries-nav { display: flex; gap: 10px; align-items: center; } 707.ind-arrow-btn { 708 width: 42px; height: 42px; border-radius: 50%; 709 background: var(--surface-card); border: 1px solid var(--border); 710 color: var(--text-s); font-family: var(--f-m); font-size: 16px; 711 display: flex; align-items: center; justify-content: center; cursor: pointer; 712 transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); 713} 714.ind-arrow-btn:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a08); transform: translateY(-1px); } 715.ind-arrow-btn:disabled { opacity: 0.3; cursor: default; } 716.ind-arrow-btn:disabled:hover { border-color: var(--border); color: var(--text-s); background: var(--surface-card); transform: none; } 717.horizontal-scroll { 718 display: flex; gap: 16px; overflow-x: auto; 719 /* `proximity` snap (not `mandatory`) â snap on arrow click without fighting 720 the pixel-by-pixel edge auto-scroll. */ 721 scroll-snap-type: x proximity; padding: 8px 0 24px; 722 -ms-overflow-style: none; scrollbar-width: none; 723 /* First card aligns with .wrap's left edge (1120px content max-width 724 centered). Subsequent cards extend off-screen right and scroll. */ 725 margin-left: calc(-50vw + 50%); width: 100vw; 726 padding-left: max(24px, calc(50vw - 560px)); 727 /* Gutter so the first card doesn't touch the viewport edge. 728 scroll-padding keeps the snap respecting the gutter. */ 729 padding-left: max(24px, calc((100vw - 1120px) / 2)); 730 padding-right: max(24px, calc((100vw - 1120px) / 2)); 731 scroll-padding-left: max(24px, calc((100vw - 1120px) / 2)); 732} 733/* When the edge auto-scroller is driving, disable snap entirely so each 734 frame's scrollLeft assignment isn't rubber-banded. */ 735.horizontal-scroll.edge-scrolling { scroll-snap-type: none; } 736.horizontal-scroll::-webkit-scrollbar { display: none; } 737.ind-card { 738 flex: 0 0 clamp(176px, 15vw, 208px); 739 aspect-ratio: 3 / 4; 740 scroll-snap-align: start; 741 border-radius: var(--r-lg); overflow: hidden; 742 position: relative; 743 background: var(--surface-card); border: 1px solid var(--border); 744 display: flex; flex-direction: column; justify-content: flex-end; 745 transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s; 746 text-decoration: none; 747 color: var(--text); 748} 749/* Per-industry theme preview on hover - same pattern as offering tiles */ 750.ind-card[data-offering-theme="blue"] { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; } 751.ind-card[data-offering-theme="pink"] { --offering-accent: #dd23bb; --offering-bright: #f472b6; } 752.ind-card[data-offering-theme="cyan"] { --offering-accent: #009be5; --offering-bright: #67e8f9; } 753.ind-card[data-offering-theme="orange"] { --offering-accent: #F07B20; --offering-bright: #fbbf24; } 754.ind-card[data-offering-theme="green"] { --offering-accent: #95C11F; --offering-bright: #a3e635; } 755.ind-card[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; } 756.ind-card[data-offering-theme="coral"] { --offering-accent: #C2004B; --offering-bright: #E6007E; } 757.ind-card:hover { 758 transform: translateY(-4px); 759 border-color: color-mix(in srgb, var(--offering-accent, var(--accent)) 50%, transparent); 760 box-shadow: 761 0 18px 50px rgba(0,0,0,0.4), 762 0 0 0 1px color-mix(in srgb, var(--offering-accent, var(--accent)) 18%, transparent), 763 0 0 48px color-mix(in srgb, var(--offering-accent, var(--accent)) 15%, transparent); 764} 765.ind-card:hover .ind-card-meta { color: var(--offering-bright, var(--accent-bright)); transition: color 0.35s var(--ease); } 766.ind-card-img { 767 /* Full-bleed background. The "1:1 master shows uncropped via contain" 768 intent in the prior version was wrong â sources are actually 576x768 769 (3:4), same aspect as the card, so contain just rendered them at 770 normal size with breathing room around. Cover + full inset lets the 771 central icon dominate; the ind-card-shade gradient at the bottom 772 still gives the text overlay readability. */ 773 position: absolute; inset: 0; width: 100%; height: 100%; 774 object-fit: cover; object-position: center 30%;
775 z-index: 0; 776 transition: transform 0.6s var(--ease); 777} 778.ind-card:hover .ind-card-img { transform: scale(1.04); } 779.ind-card-shade { 780 position: absolute; inset: 0; z-index: 1; pointer-events: none; 781 background: linear-gradient(180deg, rgba(5,5,12,0.12) 0%, rgba(5,5,12,0.22) 18%, rgba(5,5,12,0.7) 34%, rgba(5,5,12,0.87) 55%, rgba(5,5,12,0.95) 78%, rgba(5,5,12,0.98) 100%); 782} 783.ind-card-content { 784 position: relative; z-index: 2; padding: 28px 26px 26px; 785 display: flex; flex-direction: column; gap: 8px; 786} 787.ind-card-name { 788 font-family: var(--f-h); font-weight: 200; 789 font-size: clamp(22px, 2.1vw, 28px); line-height: 1.08; 790 color: var(--text); letter-spacing: -0.01em; 791 text-shadow: 0 2px 18px rgba(0,0,0,0.4); 792} 793.ind-card-hook { 794 font-family: var(--f-b); font-weight: 350; font-size: 14px; 795 line-height: 1.45; color: var(--text-s); margin: 0; 796} 797.ind-card-meta { 798 font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase; 799 letter-spacing: 0.14em; color: var(--accent-bright); 800 margin-top: 6px; 801} 802.ind-card-arrow { 803 position: absolute; top: 22px; right: 22px; z-index: 3; 804 width: 36px; height: 36px; border-radius: 50%; 805 background: rgba(5,5,12,0.55); backdrop-filter: blur(8px); 806 border: 1px solid rgba(255,255,255,0.12); 807 display: flex; align-items: center; justify-content: center; 808 color: var(--text); font-family: var(--f-m); font-size: 14px; 809 transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); 810} 811.ind-card:hover .ind-card-arrow { 812 background: var(--accent-a26); border-color: var(--accent-a45); 813 transform: translate(2px, -2px); 814} 815 816/* ======================================== 817 13. CREDENTIALS (SHRUNK to 1 line + badges) 818 ======================================== */ 819.credentials-section { 820 padding: 56px 0; text-align: center; 821 border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); 822 background: rgba(255,255,255,0.015); 823} 824.credentials-line { 825 font-family: var(--f-h); font-weight: 200; font-size: clamp(22px, 2.4vw, 28px); 826 color: var(--text); margin-bottom: 20px; 827} 828.credentials-line strong { color: var(--accent-bright); font-weight: 300; } 829.credential-badges { 830 display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; 831} 832.credential-badge { 833 font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase; 834 letter-spacing: 0.1em; color: var(--text-s); padding: 7px 14px; 835 border: 1px solid var(--border); border-radius: var(--r-sm); 836 transition: border-color 0.2s, color 0.2s, background 0.2s; 837} 838.credential-badge:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a04); } 839 840/* AWS Partnership Strip: a richer multi-row module under credentials. 841 Row 1 (banner): Premier Tier badge + Specializations + Strategic Collab chip + partner-profile link 842 Row 2 (group label + grid): Service Competencies 843 Row 3 (group label + grid): Vertical Competencies 844 Row 4 (group label + grid): AWS Service Delivery validations 845*/ 846.aws-partner-module { 847 margin-top: 36px; 848 padding: 28px 0 0; 849 border-top: 1px solid var(--border); 850 display: flex; 851 flex-direction: column; 852 gap: 24px; 853} 854.aws-partner-banner { 855 display: flex; 856 flex-wrap: wrap; 857 align-items: center; 858 justify-content: center; 859 gap: 18px 32px; 860} 861.aws-partner-banner img, 862.aws-partner-banner svg { 863 height: 64px; 864 width: auto; 865 display: block; 866 filter: brightness(1.05); 867} 868.aws-partner-chip { 869 padding: 12px 16px; 870 border: 1px solid var(--accent-a26); 871 border-radius: var(--r-sm); 872 background: var(--accent-a04); 873 color: var(--text); 874 font-family: var(--f-m); 875 font-size: 11px; 876 font-weight: 500; 877 letter-spacing: 0.12em; 878 text-transform: uppercase; 879 line-height: 1.35; 880 display: inline-flex; 881 flex-direction: column; 882 gap: 3px; 883} 884.aws-partner-chip small { 885 font-size: 9px; 886 color: var(--text-s); 887 font-weight: 400; 888 letter-spacing: 0.18em; 889} 890/* aws-partner-badge-link: wraps the Premier Tier badge as the AWS Partner 891 profile link. Subtle hover lift signals it's clickable; image inherits 892 the banner's height/filter rules so the badge looks identical to the 893 non-clickable siblings except for the hover affordance. */ 894.aws-partner-badge-link { 895 display: inline-flex; 896 align-items: center; 897 text-decoration: none; 898 border-radius: var(--r-sm); 899 transition: transform 0.2s, filter 0.2s; 900 cursor: pointer; 901} 902.aws-partner-badge-link:hover { transform: translateY(-2px); } 903.aws-partner-badge-link:hover img { filter: brightness(1.15); } 904.aws-partner-group { 905 display: flex; 906 flex-direction: column; 907 align-items: center; 908 gap: 12px; 909} 910.aws-partner-group-label { 911 font-family: var(--f-m); 912 font-size: 9.5px; 913 font-weight: 500; 914 text-transform: uppercase; 915 letter-spacing: 0.22em; 916 color: var(--text-s); 917} 918.aws-partner-grid { 919 display: flex; 920 flex-wrap: wrap; 921 align-items: center; 922 justify-content: center; 923 gap: 14px 22px; 924} 925.aws-partner-grid img { 926 height: 52px; 927 width: auto; 928 display: block; 929 filter: brightness(1.05); 930 opacity: 0.92; 931 transition: opacity 0.2s, transform 0.2s; 932} 933.aws-partner-grid img:hover { opacity: 1; transform: translateY(-2px); } 934.aws-partner-grid--small img { height: 42px; } 935@media (max-width: 720px) { 936 .aws-partner-banner { gap: 12px 18px; } 937 .aws-partner-banner img, 938 .aws-partner-banner svg { height: 48px; } 939 .aws-partner-grid img { height: 40px; } 940 .aws-partner-grid--small img { height: 32px; } 941 .process-flow::before { display: none; } 942 .process-step-dot { display: none; } 943} 944 945/* ======================================== 946 14. INSIGHTS - canonical blog cards (design-system.html :2176) 947 ======================================== */ 948.insights-section { padding: 96px 0; } 949.insights-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } 950.insights-head h2 { margin-bottom: 0; } 951.insights-all-link { 952 font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; 953 color: var(--accent-bright); padding: 10px 18px; border-radius: 9999px; 954 border: 1px solid var(--accent-a26); background: var(--accent-a04); 955 display: inline-flex; align-items: center; gap: 8px; 956 transition: background 0.2s, border-color 0.2s, transform 0.2s; 957} 958.insights-all-link:hover { background: var(--accent-a12); border-color: var(--accent-bright); transform: translateY(-1px); } 959.insights-all-link .arr { transition: transform 0.2s; } 960.insights-all-link:hover .arr { transform: translateX(3px); } 961/* Blog thumb image variant: when the dynamic insights renderer outputs an <imgdecoding="async"> 962 inside .blog-thumb, swap from procedural-SVG layout to background-image style. */ 963.blog-thumb-img { 964 width: 100%; height: 100%; object-fit: cover; display: block; 965 transition: transform 0.5s var(--ease); 966} 967.card-blog:hover .blog-thumb-img { transform: scale(1.05); } 968.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } 969.card-blog { 970 background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md); 971 overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; 972 display: flex; flex-direction: column; 973} 974.card-blog:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-color: var(--border-h); } 975.blog-thumb { 976 aspect-ratio: 16/9; position: relative; overflow: hidden; 977 background: linear-gradient(135deg, var(--accent-a12), color-mix(in srgb, var(--accent-cyan) 8%, transparent)); 978} 979.blog-thumb-inner { 980 width: 100%; height: 100%; 981 background: linear-gradient(135deg, rgba(1,29,56,0.8), rgba(5,5,12,0.9)); 982 transition: transform 0.5s var(--ease); 983 display: flex; align-items: center; justify-content: center; 984} 985.card-blog:hover .blog-thumb-inner { transform: scale(1.05); } 986.blog-thumb svg { width: 64%; height: 64%; opacity: 0.75; } 987.blog-content { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } 988.blog-category { 989 position: absolute; top: 14px; right: 14px; z-index: 2; 990 font-family: var(--f-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; 991 color: var(--text); 992 background: rgba(5,10,25,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); 993 border: 1px solid rgba(255,255,255,0.12); 994 padding: 6px 14px; border-radius: 9999px; display: inline-block; width: fit-content; 995} 996.blog-title { 997 font-family: var(--f-h); font-weight: 300; font-size: 23px; line-height: 1.25; 998 color: var(--text); 999} 1000.blog-excerpt { 1001 font-family: var(--f-b); font-weight: 350; font-size: 14.5px; line-height: 1.6; 1002 color: var(--text-s); 1003 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; 1004} 1005.blog-meta { 1006 font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; 1007 color: var(--text-m); 1008} 1009.blog-read-more { 1010 font-family: var(--f-m); font-size: 13px; font-weight: 500; color: var(--accent-bright); 1011 margin-top: auto; padding-top: 8px; 1012 transition: opacity 0.25s var(--ease); 1013} 1014.card-blog:hover .blog-read-more { text-decoration: underline; } 1015 1016/* ======================================== 1017 15. CTA (Tompkins - canvas particles) 1018 ======================================== */
1019.cta-section { padding: clamp(64px, 7vw, 96px) 0; text-align: center; position: relative; overflow: hidden; } 1020.cta-particle-canvas { position: absolute; inset: 0; z-index: 0; } 1021.cta-inner { position: relative; z-index: 1; } 1022.cta-section h2 { font-size: clamp(28px, 3vw, 38px); max-width: 640px; margin: 0 auto 18px; } 1023.cta-section .lead { max-width: 520px; margin: 0 auto 36px; text-align: center; } 1024.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; } 1025 1026/* ======================================== 1027 16. FOOTER 1028 ======================================== */ 1029footer { border-top: 1px solid var(--border); padding: 60px 0 40px; position: relative; z-index: 2; } 1030.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; } 1031.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } 1032.footer-desc { font-size: 14px; color: var(--text-m); line-height: 1.6; } 1033.footer-col-heading { 1034 font-family: var(--f-m); font-size: 10px; text-transform: uppercase; 1035 letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 16px; 1036} 1037.footer-col ul { display: flex; flex-direction: column; gap: 10px; } 1038.footer-col ul li a { font-size: 14px; color: var(--text-s); position: relative; transition: color 0.25s var(--ease); } 1039.footer-col ul li a:hover { color: var(--text); } 1040.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; } 1041.footer-copyright { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); } 1042 1043/* ======================================== 1044 R. RESPONSIVE 1045 ======================================== */ 1046@media (max-width: 960px) { 1047 .trust-strip { overflow: hidden; } 1048 .trust-strip-track { gap: 24px; } 1049 .nav { width: calc(100vw - 16px); } 1050 .nav-links { display: none; } 1051 .hero { padding-top: calc(var(--trust-strip-h) + var(--nav-h) + 48px); } 1052 .hero-ctas { flex-direction: column; align-items: flex-start; } 1053 .hero-trust-note { margin-left: 0; } 1054 .stats-grid { grid-template-columns: repeat(2, 1fr); } 1055 .offerings-head { grid-template-columns: 1fr; } 1056 .offerings-grid { grid-template-columns: repeat(6, 1fr); } 1057 .offering-tile[data-size="wide"], .offering-tile[data-size="half"] { grid-column: span 6; } 1058 .offering-tile[data-size="third"] { grid-column: span 6; } 1059 .offering-tile[data-size="full"] { grid-column: span 6; flex-direction: column; align-items: flex-start; } 1060 .offering-tile[data-size="full"] .offering-cta-side { align-items: flex-start; text-align: left; } 1061 #case-studies .tm-layout { grid-template-columns: 1fr; gap: 32px; } 1062 #credentials .cred-main { grid-template-columns: 1fr; gap: 32px; } 1063 .cred-bottom-strip { flex-wrap: wrap; row-gap: 24px; } 1064 #credentials .cred-bottom-item { flex: 1 1 100%; } 1065 .blog-grid { grid-template-columns: 1fr 1fr; } 1066 .footer-grid { grid-template-columns: 1fr 1fr; } 1067 .mouse-glow { display: none; } 1068 .bg-continuity-lines, .bg-line-center { display: none; } 1069 .cta-particle-canvas { display: none; } 1070 .vnav-wrapper { padding-left: 0; } 1071 .vnav-line, .vnav-dot { display: none; } 1072 .vnav-step { opacity: 1 !important; } 1073} 1074@media (max-width: 720px) { 1075 #timelineTrackH { grid-template-columns: 1fr; gap: 20px; } 1076 .timeline-line { display: none; } 1077 .t-era { padding-left: 12px; border-left: 2px solid var(--border); transition: border-color 0.4s var(--ease); } 1078 .t-era.active { border-left-color: var(--accent-bright); } 1079 .t-era-dot { display: none; } 1080 .t-era-headline, .t-era-note { max-width: none; margin-left: 0; } 1081} 1082@media (max-width: 580px) { 1083 .hero h1 { font-size: 34px; } 1084 .stats-grid { grid-template-columns: 1fr; } 1085 .offerings-grid { grid-template-columns: 1fr; } 1086 .offering-tile[data-size="wide"], .offering-tile[data-size="half"], .offering-tile[data-size="third"], .offering-tile[data-size="full"] { grid-column: span 1; } 1087 .blog-grid { grid-template-columns: 1fr; } 1088 .footer-grid { grid-template-columns: 1fr; } 1089 .industry-name { font-size: 22px; } 1090} 1091@media (min-width: 700px) and (max-width: 960px) { 1092 #credentials .cred-bottom-item { flex: 1 1 200px; } 1093} 1094 1095/* ======================================== 1096 REDUCED MOTION 1097 ======================================== */ 1098@media (prefers-reduced-motion: reduce) { 1099 .reveal { transition: none; opacity: 1; transform: none !important; } 1100 .fog-blob { animation: none; } 1101 .mouse-glow { display: none; } 1102 .trust-strip-track, .logo-marquee-track { animation: none; } 1103 [data-char-glow] .char { opacity: 1; color: var(--text); text-shadow: none; transition: none; } 1104 .btn-glow-pulse { animation: none; } 1105 .hero-trust-note::before { animation: none; } 1106 *, *::before, *::after { 1107 animation-duration: 0.01ms !important; 1108 animation-iteration-count: 1 !important; 1109 transition-duration: 0.01ms !important; 1110 scroll-behavior: auto !important; 1111 } 1112} 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152/* AKWriter:logo-img */ 1153.logo-img { display: block; height: auto; max-height: 32px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; filter: grayscale(1) brightness(1.5) invert(0); opacity: 0.7; transition: opacity 0.3s ease, filter 0.3s ease; } 1154.logo-img.is-dark-on-light { filter: grayscale(1) brightness(1.5) invert(1); } 1155.logo-img:hover { opacity: 1; filter: grayscale(0) brightness(1) contrast(1); } 1156/* /AKWriter:logo-img */ 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101 2102 2103 2104 2105 2106 2107 2108 2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127 2128 2129 2130 2131 2132 2133 2134 2135 2136 2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155 2156 2157 2158 2159 2160 2161 2162 2163 2164 2165 2166 2167 2168 2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183 2184 2185 2186 2187 2188 2189 2190 2191 2192 2193 2194 2195 2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245 2246 2247 2248 2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260 2261 2262 2263 2264 2265 2266 2267 2268 2269 2270 2271 2272 2273 2274 2275 2276 2277 2278 2279 2280 2281 2282 2283 2284 2285 2286 2287 2288 2289 2290 2291 2292 2293 2294 2295 2296 2297 2298 2299 2300 2301 2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335 2336 2337 2338 2339 2340 2341 2342 2343 2344 2345 2346 2347 2348 2349 2350 2351 2352 2353 2354 2355 2356 2357 2358 2359 2360 2361 2362 2363 2364 2365 2366 2367 2368 2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397 2398 2399 2400 2401 2402 2403 2404 2405 2406 2407 2408 2409 2410 2411 2412 2413 2414 2415 2416 2417 2418 2419 2420 2421 2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432 2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443 2444 2445 2446 2447 2448 2449 2450 2451 2452 2453 2454 2455 2456 2457 2458 2459 2460 2461 2462 2463 2464 2465 2466 2467 2468 2469 2470 2471 2472 2473 2474 2475 2476 2477 2478 2479 2480 2481 2482 2483 2484 2485 2486 2487 2488 2489 2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508 2509 2510 2511 2512 2513 2514 2515 2516 2517 2518 2519 2520 2521 2522 2523 2524 2525 2526 2527 2528 2529 2530 2531 2532 2533 2534 2535 2536 2537 2538 2539 2540 2541 2542 2543 2544 2545 2546 2547 2548 2549 2550 2551 2552 2553 2554 2555 2556 2557 2558 2559 2560 2561 2562 2563 2564 2565 2566 2567 2568 2569 2570 2571 2572 2573 2574 2575 2576 2577 2578 2579 2580 2581 2582 2583 2584 2585 2586 2587 2588 2589 2590 2591 2592 2593 2594 2595 2596 2597 2598 2599 2600 2601 2602 2603 2604 2605 2606 2607 2608 2609 2610 2611 2612 2613 2614</style> 2615<link rel="stylesheet" href="/assets/css/tokens.css"> 2616<link rel="stylesheet" href="/assets/css/base.css"> 2617<link rel="stylesheet" href="/assets/css/ambient.css"> 2618<link rel="stylesheet" href="/assets/css/components.css"> 2619<style> 2620/* Process section overrides â after components.css so these win */ 2621.process-flow { padding-top: 48px; } 2622.process-flow::before { top: 24px; left: 6px; right: calc(25% - 21px); height: 2px; background: var(--accent-bright); opacity: 0.8; z-index: 2; } 2623.process-step { z-index: auto; overflow: visible; } 2624.process-step-dot { top: -30px; z-index: 3; } 2625/* Carousel overrides â two-column grid layout, single card fills right column */ 2626.tm-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; } 2627.tm-content { display: flex; flex-direction: column; } 2628.tm-content .eyebrow { display: block; } 2629.tm-content h2 { text-align: left; max-width: none; margin: auto 0 0; font-size: clamp(36px, 4.5vw, 58px) !important; line-height: 1.08 !important; } 2630.tm-tagline { font-size: 1.35rem; font-weight: 300; color: var(--text-m); margin: 12px 0 0; line-height: 1.4; } 2631.tm-nav { justify-content: flex-start; margin-top: auto; padding-top: 32px; } 2632.tm-viewport { margin-left: 0; width: auto; padding: 0; border-radius: 20px; -webkit-mask-image: none; mask-image: none; overflow: hidden; } 2633.tm-track { width: 100%; } 2634.tm-slide { flex: 0 0 100%; min-width: 0; padding: 40px 48px; transition: opacity 0.4s; } 2635.tm-slide:hover { transform: none; } 2636.tm-slide:not(.active) { opacity: 0; transform: none; } 2637.tm-slide.active { opacity: 1; transform: none; } 2638.tm-slide-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } 2639.tm-divider { border: 0; border-top: 1px solid var(--accent-a26); margin: 0 0 28px; } 2640.tm-tag { align-self: auto; margin-bottom: 0; margin-left: auto; flex-shrink: 0; } 2641.tm-logo-mark { height: 32px; margin-bottom: 0; } 2642.tm-system { display: block; font-family: var(--f-h); font-weight: 300; font-size: 22px; line-height: 1.25; color: var(--text); margin-bottom: 16px; } 2643.tm-metric { display: none !important; } 2644.tm-slide blockquote { font-size: 17px; line-height: 1.65; color: rgba(235,241,251,0.9); margin: 0 0 28px; flex: none; } 2645.tm-name { font-weight: 550; font-size: 15px; } 2646.tm-role { font-size: 13px; margin-top: 3px; } 2647.tm-arrow { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } 2648/* ââ Credentials section â Figma redesign ââ */ 2649.credentials-section { text-align: left; padding: 80px 0; } 2650.cred-headline { font-family: var(--f-h); font-size: clamp(1rem, calc((100vw - 48px) / 29), 2.2rem); font-weight: 300; color: var(--text); margin-bottom: 56px; max-width: none; line-height: 1.15; white-space: nowrap; } 2651.cred-stats { display: flex; margin-bottom: 64px; } 2652.cred-stat { flex: 1; padding: 36px 32px; border-right: 1px solid var(--accent-a26); text-align: left; } 2653.cred-stat:first-child { padding-left: 0; }
2654.cred-stat:last-child { border-right: none; } 2655.cred-stat-num { font-family: var(--f-h); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; color: var(--accent-bright); line-height: 1; letter-spacing: -0.02em; } 2656.cred-stat-label { font-size: 0.875rem; color: var(--text-m); margin-top: 10px; } 2657.cred-main { display: grid; grid-template-columns: 3fr 7fr; gap: 48px; align-items: start; margin-bottom: 64px; } 2658.cred-badge-display { display: flex; align-items: center; justify-content: center; height: 320px; } 2659.cred-badge-display-pic { display: flex; align-items: center; justify-content: center; } 2660.cred-badge-display-img { width: 220px; height: 220px; object-fit: contain; transition: opacity 0.2s ease, transform 0.2s ease; } 2661.cred-badge-display.reveal { transform: translateY(16px) scale(0.88); } 2662.cred-badge-display.reveal.visible { transform: translateY(0) scale(1); } 2663.cred-badge-item--active { background: rgba(123,198,255,0.08) !important; border-left: 2px solid var(--accent-bright) !important; padding-left: 18px !important; } 2664.cred-badge-item { cursor: pointer; } 2665.cred-tabs-panel { display: flex; flex-direction: column; height: 320px; border: 1px solid var(--accent-a26); border-radius: 8px; overflow: hidden; } 2666.cred-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--accent-a26); background: rgba(255,255,255,0.02); flex-shrink: 0; } 2667.cred-tab { flex: 0 0 auto; padding: 16px 24px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-m); font-size: 14px; font-family: var(--f-m); letter-spacing: 0.04em; text-align: left; cursor: pointer; transition: color 0.2s, border-color 0.2s; } 2668.cred-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent-bright); } 2669.cred-tab:hover:not(.active) { color: var(--text); } 2670.cred-tab-pane { display: none; flex-direction: column; flex: 1; min-height: 0; } 2671.cred-tab-pane.active { display: flex; } 2672.cred-badge-list { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: #f90 transparent; } 2673.cred-badge-list::-webkit-scrollbar { width: 4px; } 2674.cred-badge-list::-webkit-scrollbar-thumb { background: #f90; border-radius: 2px; } 2675.cred-badge-item { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; } 2676.cred-badge-item:last-child { border-bottom: none; } 2677.cred-badge-item:hover { background: rgba(255,255,255,0.03); } 2678.cred-badge-item picture, .cred-badge-item > img { display: none; } 2679.cred-badge-name { font-size: 14px; color: var(--text); line-height: 1.4; width: 100%; } 2680.cred-bottom-strip { display: flex; gap: 0; border-top: 1px solid var(--accent-a26); padding-top: 48px; } 2681.cred-bottom-item { display: flex; align-items: flex-start; gap: 16px; flex: 1; padding-right: 40px; } 2682.cred-bottom-item:last-child { padding-right: 0; } 2683.cred-bottom-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 2684.cred-bottom-label { font-size: 16px; font-weight: 450; color: var(--text); line-height: 1.5; padding-top: 6px; } 2685 2686 2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702 2703 2704/* AKWriter typography + theme normalization */ 2705:where(body[data-theme], html[data-theme] body) { font-family: var(--f-b, 'Inter', system-ui, sans-serif); font-weight: 350; line-height: 1.65; color: var(--text, #ebf1fb); } 2706:where(body[data-theme], html[data-theme] body) h1 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 200; font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.05; letter-spacing: -0.01em; color: var(--text, #ebf1fb); } 2707:where(body[data-theme], html[data-theme] body) h2 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 300; font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.18; color: var(--text, #ebf1fb); } 2708:where(body[data-theme], html[data-theme] body) h3 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 300; line-height: 1.25; color: var(--accent-bright, #7bc6ff); } 2709:where(body[data-theme], html[data-theme] body) h4 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 400; color: var(--text, #ebf1fb); } 2710:where(body[data-theme], html[data-theme] body) section p { font-size: 16px; line-height: 1.65; } 2711:where(body[data-theme], html[data-theme] body) section li { font-size: 15px; line-height: 1.6; } 2712:where(body[data-theme], html[data-theme] body) strong { color: var(--text, #ebf1fb); font-weight: 500; } 2713:where(body[data-theme], html[data-theme] body) section :where(.eyebrow, [class*="eyebrow"], .stat-lbl, .kv .lbl) { color: var(--accent-cyan, #009be5); } 2714:where(body[data-theme], html[data-theme] body) section :where(.stat-num, .num, .kv .num) { color: var(--aws, #FF9900); } 2715:where(body[data-theme], html[data-theme] body) section a:not([class]):hover { color: var(--accent-bright, #7bc6ff); } 2716/* /AKWriter typography + theme normalization */ 2717 2718 2719/* AKWriter unified site nav (extends canonical nav from components.css) */ 2720nav[role="navigation"][aria-label="Main navigation"]{position:fixed !important;top:14px !important;left:50% !important;transform:translateX(-50%) !important;width:min(1100px, calc(100vw - 32px)) !important;z-index:1000 !important;display:grid !important;grid-template-columns:auto 1fr auto !important;gap:18px !important;padding:10px 16px !important;border-radius:22px !important;border:1px solid rgba(255,255,255,0.11) !important;background:linear-gradient(180deg,rgba(11,17,30,0.80),rgba(6,9,16,0.70)) !important;backdrop-filter:blur(26px) saturate(1.30) !important;-webkit-backdrop-filter:blur(26px) saturate(1.30) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.025), 0 18px 44px rgba(0,0,0,0.32), 0 0 38px rgba(45,98,25
27205,0.06) !important;} 2721nav[role="navigation"][aria-label="Main navigation"] .nav-brand{display:flex !important;align-items:center !important;gap:4px !important;text-decoration:none !important;} 2722nav[role="navigation"][aria-label="Main navigation"] .nav-links{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;} 2723.nav-brand{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--text,#ebf1fb);} 2724.nav-brand-mark{display:block;height:17px;width:auto;flex-shrink:0;} 2725.nav-brand-name{display:inline-flex;align-items:center;height:17px;font-family:var(--f-h,'Saira Semi Condensed',sans-serif);font-weight:300;font-size:15px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text,#ebf1fb);line-height:17px;} 2726.nav-mobile-toggle{display:none;background:none;border:0;color:var(--text,#ebf1fb);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;} 2727.nav-link{font-family:var(--f-m,monospace);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;padding:7px 10px;} 2728button.nav-link{background:none;border:0;cursor:pointer;font-family:var(--f-m,monospace);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;padding:7px 10px;} 2729.nav-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:6px;opacity:0.5;transition:transform 0.22s var(--ease-default,ease),opacity 0.22s var(--ease-default,ease);} 2730.nav-dd:hover .nav-caret,.nav-dd[data-open="true"] .nav-caret{transform:rotate(180deg);opacity:0.9;} 2731.nav-dd{position:relative;display:inline-flex;align-items:center;} 2732.nav-dd:hover > .nav-link,.nav-dd:focus-within > .nav-link{color:var(--text,#ebf1fb);} 2733.nav-dd.is-active > .nav-link{color:var(--text,#ebf1fb);} 2734.nav-dd.is-active > .nav-link::after{transform:scaleX(1) !important;} 2735a.nav-link.is-active{color:var(--text,#ebf1fb);} 2736a.nav-link.is-active::after{transform:scaleX(1) !important;} 2737.nav-dd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px) scale(0.985);margin-top:12px;background:linear-gradient(145deg,rgba(10,16,28,0.995),rgba(4,7,14,0.992));border:1px solid rgba(255,255,255,0.14);border-radius:22px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(255,255,255,0.03),0 30px 74px rgba(0,0,0,0.72),0 0 46px rgba(0,155,229,0.08);z-index:1001;backdrop-filter:blur(34px) saturate(1.12);-webkit-backdrop-filter:blur(34px) saturate(1.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.18s var(--ease-default,ease),visibility 0.18s var(--ease-default,ease),transform 0.22s var(--ease-default,ease);} 2738.nav-dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;} 2739.nav-dd-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,15,0.62),rgba(5,8,15,0.42)),radial-gradient(circle at 18% 0%,rgba(123,198,255,0.08),transparent 34%),radial-gradient(circle at 100% 30%,rgba(230,0,126,0.035),transparent 28%);} 2740.nav-dd-panel > *{position:relative;z-index:1;} 2741.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd[data-open="true"] .nav-dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);} 2742.nav-dd-panel-narrow{min-width:260px;} 2743.nav-dd-panel-narrow ul{list-style:none;margin:0;padding:0;} 2744.nav-dd-panel-narrow li{margin:0;}
2745.nav-dd-panel-menu{gap:8px;} 2746.nav-dd-panel-wide{width:min(1060px,calc(100vw - 48px));} 2747.nav-dd-panel-wide{display:flex;flex-direction:column;} 2748.nav-dd-panel-services{min-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:16px;} 2749.nav-dd-panel-industries{min-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:16px;} 2750.nav-menu-row{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;padding:11px 12px;border-radius:15px;text-decoration:none;color:var(--text,#ebf1fb);text-transform:none;letter-spacing:normal;transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);} 2751.nav-menu-row:hover{background:rgba(123,198,255,0.065);transform:translateX(2px);} 2752.nav-menu-row.is-current{background:rgba(45,98,255,0.11);} 2753.nav-links .nav-menu-row{font-family:var(--f-b,sans-serif);font-size:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text,#ebf1fb);padding:11px 12px;border-radius:15px;} 2754.nav-industry-row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:15px;text-decoration:none;color:var(--text,#ebf1fb);text-transform:none;letter-spacing:0;transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);} 2755.nav-industry-row:hover{background:rgba(123,198,255,0.065);transform:translateX(2px);} 2756.nav-links .nav-industry-row{font-family:var(--f-b,sans-serif);font-size:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text,#ebf1fb);padding:11px 12px;border-radius:15px;} 2757.nav-industry-thumb{width:38px;height:38px;display:block;flex-shrink:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.025);border:1px solid rgba(123,198,255,0.12);} 2758.nav-industry-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03);} 2759.nav-industry-icon img{object-fit:cover;border-radius:inherit;filter:saturate(1.04) contrast(1.03);} 2760.nav-industry-title{font-family:var(--f-b,sans-serif);font-size:13px;font-weight:400;line-height:1.28;color:rgba(235,241,251,0.84);} 2761.nav-solutions-layout{display:block;padding:8px;} 2762.nav-solution-feature{display:flex;flex-direction:column;gap:18px;padding:8px 14px;} 2763.nav-solution-feature-head{display:flex;gap:14px;color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;} 2764.nav-solution-col{min-width:0;display:block;padding:12px;border-radius:15px;background:rgba(255,255,255,0.012);transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);} 2765.nav-solution-col:hover{background:rgba(123,198,255,0.055);} 2766.nav-card-head{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;min-height:44px;text-decoration:none;color:inherit;text-transform:none;letter-spacing:normal;} 2767.nav-card-links{width:100%;display:grid;grid-template-columns:1fr;gap:8px;padding-top:13px;margin-top:13px;border-top:1px solid rgba(255,255,255,0.08);} 2768.nav-link-group{min-width:0;padding-left:0;} 2769.nav-dd-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.035);align-self:center;} 2770.nav-dd-icon img{display:block;width:42px;height:42px;object-fit:cover;filter:saturate(1.08) contrast(1.04);} 2771.nav-dd-text{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;align-self:center;} 2772.nav-dd-title{display:block;font-family:var(--f-h,'Saira Semi Condensed',sans-serif);font-weight:300;font-size:17px;color:rgba(235,241,251,0.94);line-height:1.05;text-transform:none;letter-spacing:0.01em;} 2773.nav-dd-desc{display:block;font-family:var(--f-b,sans-serif);font-weight:350;font-size:12px;color:rgba(235,241,251,0.58);line-height:1.32;text-transform:none;letter-spacing:0;margin-top:3px;} 2774.nav-cta{font-family:var(--f-m,monospace) !important;font-size:11px !important;font-weight:400 !important;letter-spacing:0.12em !important;padding:8px 16px !important;border-radius:15px !important;text-decoration:none !important;} 2775.nav-dd-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;} 2776.nav-dd-col ul{list-style:none;margin:0;padding:0;}
2777.nav-dd-sub{margin-top:12px;} 2778.nav-dd-sub:first-of-type{margin-top:0;} 2779.nav-dd-sub-label{padding:0 0 7px;font-family:var(--f-m,monospace);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:rgba(235,241,251,0.46);} 2780.nav-dd-link{display:block;padding:6px 0;color:var(--text-s,rgba(235,241,251,0.78));font-family:var(--f-m,monospace);font-size:12px;font-weight:400;text-transform:none;letter-spacing:0.02em;text-decoration:none;border-radius:9px;transition:color 0.15s var(--ease-default,ease),transform 0.15s var(--ease-default,ease);} 2781.nav-links .nav-dd-link{font-family:var(--f-m,monospace);font-size:12px;font-weight:400;text-transform:none;letter-spacing:0.02em;color:var(--text-s,rgba(235,241,251,0.78));padding:6px 0;border-radius:9px;} 2782.nav-dd-link::after{display:none !important;} 2783.nav-dd-link:hover{color:var(--text,#ebf1fb);transform:translateX(2px);} 2784.nav-dd-link.is-current{color:var(--accent-bright,#7bc6ff);} 2785.nav-menu-section-label{font-family:var(--f-m,monospace);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:rgba(235,241,251,0.46);padding:0 0 3px;} 2786.nav-menu-section-label--solutions{color:var(--accent-bright,#7bc6ff);} 2787.nav-menu-section-label--workshop{color:var(--aws-orange,#FF9900);} 2788.nav-dd-link.has-desc{padding:7px 0;} 2789.nav-dd-link-label{display:block;line-height:1.25;} 2790.nav-dd-link-desc{display:block;font-family:var(--f-b,sans-serif);font-size:11.5px;font-weight:350;text-transform:none;letter-spacing:0;line-height:1.32;color:rgba(235,241,251,0.46);margin-top:3px;} 2791.nav-dd-link:hover .nav-dd-link-desc{color:rgba(235,241,251,0.62);} 2792 2793@media(max-width:880px){ 2794 nav[role="navigation"][aria-label="Main navigation"]{left:16px !important;right:auto !important;transform:none !important;width:calc(100dvw - 32px) !important;grid-template-columns:auto 1fr auto !important;gap:8px !important;} 2795 .nav-mobile-toggle{display:block;justify-self:end;grid-column:3;} 2796 nav[role="navigation"][aria-label="Main navigation"] .nav-links{display:none !important;grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px;padding-top:8px;border-top:1px solid var(--border,rgba(255,255,255,0.07));} 2797 nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-links{display:flex !important;} 2798 .nav-cta{display:none;} 2799 nav[data-open="true"] .nav-cta{display:inline-flex;justify-content:center;grid-column:1/-1;margin-top:8px;} 2800 .nav-dd{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;} 2801 .nav-dd > .nav-link{width:100%;text-align:left;} 2802 .nav-dd-panel{position:static !important;left:auto !important;right:auto !important;top:auto !important;display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;background:transparent;border:0;box-shadow:none;margin:0;padding:0 0 8px 12px;backdrop-filter:none;-webkit-backdrop-filter:none;} 2803 .nav-dd[data-open="true"] .nav-dd-panel{display:block;} 2804 .nav-dd[data-open="true"] .nav-dd-panel-services{display:grid;} 2805 .nav-dd[data-open="true"] .nav-dd-panel-wide{display:flex;} 2806 .nav-dd[data-open="true"] .nav-dd-panel-industries{display:grid;} 2807 .nav-dd-panel::after{display:none;} 2808 .nav-dd-panel-services{min-width:auto;grid-template-columns:1fr;} 2809 .nav-dd-panel-industries{min-width:auto;width:100%;grid-template-columns:1fr;padding:0 0 8px 12px;} 2810 .nav-dd-panel-wide{width:100%;} 2811 .nav-solutions-layout{display:block;padding:0;} 2812 .nav-dd-cols{grid-template-columns:1fr;gap:8px;} 2813 .nav-solution-feature,.nav-solution-col{display:block;padding:10px;background:rgba(255,255,255,0.025);} 2814 .nav-card-links{grid-template-columns:1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.08);} 2815 .nav-menu-row{padding:10px;} 2816} 2817/* /AKWriter unified site nav */ 2818 2819 2820/* AKWriter unified site footer */ 2821footer.site-footer{margin-top:120px;padding:80px 0 32px;background:linear-gradient(180deg,transparent 0%,rgba(8,12,20,0.6) 24%,rgba(8,12,20,0.92) 100%);border-top:1px solid var(--border,rgba(255,255,255,0.07));position:relative;z-index:1;} 2822footer.site-footer .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} 2823footer.site-footer .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:48px;} 2824footer.site-footer .footer-brand-col{display:flex;flex-direction:column;gap:16px;} 2825footer.site-footer .footer-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text,#ebf1fb);} 2826footer.site-footer .footer-brand-mark{display:block;height:24px;width:auto;flex-shrink:0;} 2827footer.site-footer .footer-brand-name{font-family:var(--f-h, 'Saira Semi Condensed'),sans-serif;font-weight:300;font-size:18px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text,#ebf1fb);line-height:1;} 2828footer.site-footer .footer-tagline{font-family:var(--f-b,sans-serif);font-weight:350;font-size:13px;line-height:1.6;color:var(--text-s,rgba(235,241,251,0.72));max-width:340px;margin:0;} 2829footer.site-footer .footer-col{display:flex;flex-direction:column;gap:14px;} 2830footer.site-footer .footer-col-heading{font-family:var(--f-m,monospace);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--accent-cyan,#009be5);} 2831footer.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} 2832footer.site-footer .footer-col a{color:var(--text-s,rgba(235,241,251,0.72));text-decoration:none;font-family:var(--f-b,sans-serif);font-size:13.5px;line-height:1.5;transition:color 0.15s var(--ease-default,ease);} 2833footer.site-footer .footer-col a:hover{color:var(--accent-bright,#7bc6ff);} 2834footer.site-footer .footer-office{display:flex;flex-direction:column;gap:2px;padding:0;color:var(--text-s,rgba(235,241,251,0.72));} 2835footer.site-footer .footer-office-city{font-family:var(--f-h,sans-serif);font-weight:400;font-size:13px;color:var(--text,#ebf1fb);} 2836footer.site-footer .footer-office-addr{font-family:var(--f-b,sans-serif);font-size:12px;line-height:1.45;color:var(--text-s,rgba(235,241,251,0.62));} 2837footer.site-footer .footer-office-phone{font-family:var(--f-m,monospace);font-size:11px;letter-spacing:0.04em;color:var(--text-m,rgba(235,241,251,0.45));margin-top:2px;} 2838footer.site-footer .footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--border,rgba(255,255,255,0.07));display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;} 2839footer.site-footer .footer-copyright{font-family:var(--f-b,sans-serif);font-size:12px;color:var(--text-m,rgba(235,241,251,0.45));} 2840footer.site-footer .footer-legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;} 2841footer.site-footer .footer-bottom-link{font-family:var(--f-m,monospace);font-size:12px;color:var(--text-s,rgba(235,241,251,0.62));text-decoration:none;letter-spacing:0.04em;transition:color 0.15s var(--ease-default,ease);} 2842footer.site-footer .footer-bottom-link:hover{color:var(--accent-bright,#7bc6ff);} 2843@media(max-width:1080px){footer.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:36px 32px;}} 2844@media(max-width:640px){footer.site-footer{padding:56px 0 28px;margin-top:80px;}footer.site-footer .footer-grid{grid-template-columns:1fr;gap:32px;}footer.site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}footer.site-footer .footer-legal-nav{gap:14px;}} 2845/* /AKWriter unified site footer */ 2846 2847</style> 2848<!-- AKWriter:seo start --> 2849<meta name="description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods."> 2850<link rel="canonical" href="https://www.armakuni.com/"> 2851<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png"> 2852<link rel="icon" type="image/png" sizes="256x256" href="/assets/favicon-256.png"> 2853<link rel="apple-touch-icon" href="/assets/favicon-256.png"> 2854<link rel="shortcut icon" href="/assets/favicon-32.png"> 2855<meta property="og:type" content="website"> 2856<meta property="og:title" content="Armakuni | The engineering partner for the AI era. AWS Premier."> 2857<meta property="og:description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods."> 2858<meta property="og:url" content="https://www.armakuni.com/"> 2859<meta property="og:image" content="https://www.armakuni.com/assets/og-image.png"> 2860<meta property="og:image:alt" content="Armakuni | AWS Premier Partner"> 2861<meta property="og:site_name" content="Armakuni"> 2862<meta name="twitter:card" content="summary_large_image"> 2863<meta name="twitter:title" content="Armakuni | The engineering partner for the AI era. AWS Premier."> 2864<meta name="twitter:description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods."> 2865<meta name="twitter:image" content="https://www.armakuni.com/assets/og-image.png">
2866<script type="application/ld+json"> 2867{ 2868 "@context": "https://schema.org", 2869 "@type": "Organization", 2870 "name": "Armakuni", 2871 "url": "https://www.armakuni.com", 2872 "logo": "https://www.armakuni.com/assets/ak-logo.png", 2873 "description": "AWS Premier Partner. Engineering partner for the AI era. 1,300+ engineers shipping on AWS since 2012.", 2874 "sameAs": [ 2875 "https://www.linkedin.com/company/armakuni", 2876 "https://github.com/armakuni" 2877 ], 2878 "award": [ 2879 "AWS Premier Tier Services Partner", 2880 "AWS Migration and Modernization Competency", 2881 "AWS DevOps Consulting Competency", 2882 "AWS Data and Analytics Consulting Competency", 2883 "AWS AI Services Competency" 2884 ] 2885} 2886</script>
vendor: 1 bytes, line 2886
2886
2887<script type="application/ld+json"> 2888{ 2889 "@context": "https://schema.org", 2890 "@type": "WebPage", 2891 "name": "Armakuni | The engineering partner for the AI era. AWS Premier.", 2892 "description": "AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods.", 2893 "url": "https://www.armakuni.com/", 2894 "inLanguage": "en", 2895 "isPartOf": { 2896 "@type": "WebSite", 2897 "name": "Armakuni", 2898 "url": "https://www.armakuni.com" 2899 }, 2900 "publisher": { 2901 "@type": "Organization", 2902 "name": "Armakuni" 2903 } 2904} 2905</script>
vendor: 1 bytes, line 2905
2905
2906<script type="application/ld+json"> 2907{ 2908 "@context": "https://schema.org", 2909 "@type": "BreadcrumbList", 2910 "itemListElement": [ 2911 { 2912 "@type": "ListItem", 2913 "position": 1, 2914 "name": "Home", 2915 "item": "https://www.armakuni.com/" 2916 } 2917 ] 2918} 2919</script>
2919 2920<!-- AKWriter:seo end --> 2921<link rel="stylesheet" href="/assets/css/mobile-fixes.css" media="(max-width: 1024px)"> 2922<!-- AKWriter:analytics head start -->
2923<script> 2924window.dataLayer = window.dataLayer || []; 2925dataLayer.push({ 2926 'page_type': 'home', 2927 'content_group': 'homepage', 2928 'page_language': 'en' 2929}); 2930</script>
vendor: 1 bytes, line 2930
2930
2931<script> 2932window.dataLayer=window.dataLayer||[]; 2933function gtag(){dataLayer.push(arguments);} 2934gtag('consent','default',{ 2935 ad_storage:'denied', 2936 ad_user_data:'denied', 2937 ad_personalization:'denied', 2938 analytics_storage:'denied', 2939 functionality_storage:'granted', 2940 security_storage:'granted', 2941 wait_for_update:500 2942}); 2943gtag('set','ads_data_redaction',true); 2944gtag('set','url_passthrough',true); 2945try{ 2946 var __akc=JSON.parse(localStorage.getItem('ak_consent_v1')||'null'); 2947 if(__akc&&__akc.v==='v1'){ 2948 gtag('consent','update',{ 2949 analytics_storage:__akc.analytics?'granted':'denied', 2950 ad_storage:__akc.ads?'granted':'denied', 2951 ad_user_data:__akc.ads?'granted':'denied', 2952 ad_personalization:__akc.ads?'granted':'denied' 2953 }); 2954 } 2955}catch(e){} 2956</script>
2956 2957<!-- Google Tag Manager -->
2958<script>
vendor: 327 bytes, lines 2958-2962
2958(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 2959new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 2960j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 2961'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 2962})(window,document,'script','dataLayer','
2962GTM-PKPHRLX5
vendor: 3 bytes, line 2962
2962');
2962</script>
2962 2963<!-- End Google Tag Manager -->
2964<script> 2965function __akClarityLoad(){ 2966 if(window.__akClarityLoaded)return; 2967 window.__akClarityLoaded=true; 2968 (function(c,l,a,r,i,t,y){ 2969 c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; 2970 t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; 2971 y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); 2972 })(window, document, "clarity", "script", "w1px8bq351"); 2973} 2974try{ 2975 var __akcc=JSON.parse(localStorage.getItem('ak_consent_v1')||'null'); 2976 if(__akcc&&__akcc.v==='v1'&&__akcc.analytics)__akClarityLoad(); 2977}catch(e){} 2978</script>
2978 2979<!-- AKWriter:analytics head end --> 2980</head> 2981<body> 2982<!-- AKWriter:analytics body start --> 2983<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 2983-2984
2983 2984<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
2984GTM-PKPHRLX5
vendor: 83 bytes, lines 2984-2985
2984" 2985height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
2986<!-- End Google Tag Manager (noscript) --> 2987<!-- AKWriter:analytics body end --> 2988<a href="#main" class="skip-to-main">Skip to main content</a> 2989 2990<!-- BACKGROUND SYSTEM --> 2991<div class="bg-dot-grid"></div> 2992<div class="bg-continuity-lines"></div> 2993<div class="bg-line-center"></div> 2994<div class="fog-layer"> 2995 <div class="fog-blob fog-blob-1"></div> 2996 <div class="fog-blob fog-blob-2"></div> 2997 <div class="fog-blob fog-blob-3"></div> 2998</div> 2999<div class="mouse-glow" id="mouseGlow"></div> 3000<div class="scroll-progress" id="scrollProgress"></div> 3001 3002<!-- Trust-strip marquee removed per taste direction 2026-04-23. Certifications 3003 surface in the credentials section + nav instead of a top scrolling band. --> 3004 3005<!-- NAV --> 3006<!-- AKWriter:nav start --> 3007<nav role="navigation" aria-label="Main navigation"> 3008 <a class="nav-brand" href="/" aria-label="Armakuni home"> 3009 <img class="nav-brand-mark" src="/assets/AK%20White%20Logo.webp" width="320" height="52" alt="Armakuni" decoding="async"> 3010 </a> 3011 <div class="nav-links"> 3012 <div class="nav-dd" data-nav-key="services"> 3013 <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Services<span class="nav-caret" aria-hidden="true"></span></button> 3014 <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-services" role="menu"> 3015 <a href="/offerings/modernization-with-ai" class="nav-menu-row"> 3016 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-modernization.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3017 <div class="nav-dd-text"> 3018 <div class="nav-dd-title">Modernization with AI</div> 3019 <div class="nav-dd-desc">Continuous modernization on AWS</div> 3020 </div> 3021 </a> 3022 <a href="/offerings/gen-ai-and-agentic-ai" class="nav-menu-row"> 3023 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-ai.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3024 <div class="nav-dd-text"> 3025 <div class="nav-dd-title">AI Transformation</div> 3026 <div class="nav-dd-desc">Production GenAI and agentic systems</div> 3027 </div> 3028 </a> 3029 <a href="/offerings/amazon-connect" class="nav-menu-row"> 3030 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-connect.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3031 <div class="nav-dd-text"> 3032 <div class="nav-dd-title">Connect Customer</div> 3033 <div class="nav-dd-desc">AI-augmented contact centres</div> 3034 </div> 3035 </a> 3036 <a href="/offerings/data-engineering" class="nav-menu-row"> 3037 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-data.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3038 <div class="nav-dd-text"> 3039 <div class="nav-dd-title">Data Engineering</div> 3040 <div class="nav-dd-desc">Pipelines and platforms on AWS</div> 3041 </div> 3042 </a> 3043 <a href="/offerings/managed-services" class="nav-menu-row"> 3044 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-managed.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3045 <div class="nav-dd-text"> 3046 <div class="nav-dd-title">Managed Services</div> 3047 <div class="nav-dd-desc">24Ã7 ownership of your platform</div> 3048 </div> 3049 </a> 3050 <a href="/offerings/app-dev-pods" class="nav-menu-row"> 3051 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-pods.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3052 <div class="nav-dd-text"> 3053 <div class="nav-dd-title">Application Development Pods</div> 3054 <div class="nav-dd-desc">Embedded engineering teams</div> 3055 </div> 3056 </a> 3057 <a href="/offerings/migration" class="nav-menu-row">
3058 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-migration.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3059 <div class="nav-dd-text"> 3060 <div class="nav-dd-title">Migration</div> 3061 <div class="nav-dd-desc">AWS migration with AI tooling</div> 3062 </div> 3063 </a> 3064 </div> 3065 </div> 3066 <div class="nav-dd" data-nav-key="solutions"> 3067 <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Solutions<span class="nav-caret" aria-hidden="true"></span></button> 3068 <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-wide" role="menu"> 3069 <div class="nav-solutions-layout"> 3070 <div class="nav-dd-cols"> 3071 <div class="nav-solution-col"> 3072 <a href="/offerings/modernization-with-ai" class="nav-card-head"> 3073 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-modernization.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3074 <div class="nav-dd-text"> 3075 <div class="nav-dd-title">Modernization</div> 3076 </div> 3077 </a> 3078 <div class="nav-card-links"> 3079 <div class="nav-link-group"> 3080 <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div> 3081 <a href="/offerings/modernization-with-ai/evolve" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Evolve</span><span class="nav-dd-link-desc">AI-assisted codebase modernization</span></a> 3082 <a href="/offerings/modernization-with-ai/compass" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compass</span><span class="nav-dd-link-desc">Modernization assessment engine</span></a> 3083 </div><div class="nav-link-group"> 3084 <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div> 3085 <a href="/workshops/ai-sdlc" class="nav-dd-link has-desc"><span class="nav-dd-link-label">AI DLC</span><span class="nav-dd-link-desc">AI maturity workshop</span></a> 3086 <a href="/offerings/modernization-with-ai/workshop-evolve" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Evolve</span><span class="nav-dd-link-desc">AI-assisted codebase modernization</span></a> 3087 <a href="/offerings/modernization-with-ai/workshop-compass" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compass</span><span class="nav-dd-link-desc">Modernization assessment engine</span></a> 3088 </div> 3089 </div> 3090 </div> 3091 <div class="nav-solution-col"> 3092 <a href="/offerings/gen-ai-and-agentic-ai" class="nav-card-head"> 3093 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-ai.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3094 <div class="nav-dd-text"> 3095 <div class="nav-dd-title">AI Transformation</div> 3096 </div> 3097 </a> 3098 <div class="nav-card-links"> 3099 <div class="nav-link-group"> 3100 <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div> 3101 <a href="/workshops/push" class="nav-dd-link"><span class="nav-dd-link-label">Push + Agentic</span></a> 3102 <a href="/workshops/ai-at-scale-governance" class="nav-dd-link"><span class="nav-dd-link-label">AI Strategy & Governance</span></a> 3103 <a href="/workshops/ai-agents-ak-way" class="nav-dd-link"><span class="nav-dd-link-label">Building Production AI</span></a> 3104 <a href="/workshops/openai-bedrock-migration" class="nav-dd-link"><span class="nav-dd-link-label">OpenAI â Bedrock</span></a> 3105 </div> 3106 </div> 3107 </div> 3108 <div class="nav-solution-col"> 3109 <a href="/offerings/amazon-connect" class="nav-card-head"> 3110 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-connect.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3111 <div class="nav-dd-text"> 3112 <div class="nav-dd-title">Connect Customer</div> 3113 </div> 3114 </a> 3115 <div class="nav-card-links"> 3116 <div class="nav-link-group"> 3117 <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div> 3118 <a href="/offerings/amazon-connect/compliant-connect-accelerator" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compliant Connect Accelerator</span><span class="nav-dd-link-desc">Compliant contact-centre deployment</span></a> 3119 <a href="/offerings/amazon-connect/sonic" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Sonic</span><span class="nav-dd-link-desc">AI vocal coaching</span></a> 3120 <a href="/offerings/amazon-connect/flowshift" class="nav-dd-link has-desc"><span class="nav-dd-link-label">FlowShift</span><span class="nav-dd-link-desc">Connect migration accelerator</span></a> 3121 </div><div class="nav-link-group"> 3122 <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div> 3123 <a href="/offerings/amazon-connect/workshop-intelligence" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Intelligence</span><span class="nav-dd-link-desc">Agent assist workshop</span></a> 3124 <a href="/offerings/amazon-connect/workshop-migration" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Migration</span><span class="nav-dd-link-desc">
3124Migration readiness assessment</span></a> 3125 </div> 3126 </div> 3127 </div> 3128 <div class="nav-solution-col"> 3129 <a href="/offerings/data-engineering" class="nav-card-head"> 3130 <span class="nav-dd-icon"><img src="/assets/nav-icons/service-data.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3131 <div class="nav-dd-text"> 3132 <div class="nav-dd-title">Data Engineering</div> 3133 </div> 3134 </a> 3135 <div class="nav-card-links"> 3136 <div class="nav-link-group"> 3137 <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div> 3138 <a href="/offerings/data-engineering/axiom" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Axiom</span><span class="nav-dd-link-desc">Semantic data layer</span></a> 3139 </div><div class="nav-link-group"> 3140 <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div> 3141 <a href="/offerings/data-engineering/workshop" class="nav-dd-link"><span class="nav-dd-link-label">Data Engineering</span></a> 3142 </div> 3143 </div> 3144 </div> 3145 </div> 3146 </div> 3147 </div> 3148 </div> 3149 <div class="nav-dd" data-nav-key="industries"> 3150 <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Industries<span class="nav-caret" aria-hidden="true"></span></button> 3151 <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-industries" role="menu"> 3152 <a href="/industries/financial-services" class="nav-menu-row nav-industry-row"> 3153 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/financial-services.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3154 <span class="nav-dd-text"> 3155 <span class="nav-dd-title">Financial Services</span> 3156 <span class="nav-dd-desc">Banking, insurance, payments</span> 3157 </span> 3158 </a> 3159 <a href="/industries/healthcare" class="nav-menu-row nav-industry-row"> 3160 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/healthcare.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3161 <span class="nav-dd-text"> 3162 <span class="nav-dd-title">Healthcare</span> 3163 <span class="nav-dd-desc">Clinical data and care operations</span> 3164 </span> 3165 </a> 3166 <a href="/industries/public-sector" class="nav-menu-row nav-industry-row"> 3167 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/public-sector.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3168 <span class="nav-dd-text"> 3169 <span class="nav-dd-title">Public Sector</span> 3170 <span class="nav-dd-desc">Public services and social impact</span> 3171 </span> 3172 </a> 3173 <a href="/industries/manufacturing" class="nav-menu-row nav-industry-row"> 3174 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/manufacturing.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3175 <span class="nav-dd-text"> 3176 <span class="nav-dd-title">Manufacturing</span> 3177 <span class="nav-dd-desc">Operations and supply chains</span> 3178 </span> 3179 </a> 3180 <a href="/industries/media-entertainment" class="nav-menu-row nav-industry-row"> 3181 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/media-entertainment.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3182 <span class="nav-dd-text"> 3183 <span class="nav-dd-title">Media & Entertainment</span> 3184 <span class="nav-dd-desc">Live scale and content platforms</span> 3185 </span> 3186 </a> 3187 <a href="/industries/saas-isv" class="nav-menu-row nav-industry-row">
3188 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/saas-isv.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3189 <span class="nav-dd-text"> 3190 <span class="nav-dd-title">SaaS & ISV</span> 3191 <span class="nav-dd-desc">Multi-tenant product platforms</span> 3192 </span> 3193 </a> 3194 <a href="/industries/retail-ecommerce" class="nav-menu-row nav-industry-row"> 3195 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/retail-ecommerce.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3196 <span class="nav-dd-text"> 3197 <span class="nav-dd-title">Retail & E-commerce</span> 3198 <span class="nav-dd-desc">Commerce and fulfilment systems</span> 3199 </span> 3200 </a> 3201 <a href="/industries/private-equity-vc" class="nav-menu-row nav-industry-row"> 3202 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/private-equity-vc.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3203 <span class="nav-dd-text"> 3204 <span class="nav-dd-title">Private Equity & VC</span> 3205 <span class="nav-dd-desc">Portfolio engineering, diligence, value creation</span> 3206 </span> 3207 </a> 3208 <a href="/industries/telecom" class="nav-menu-row nav-industry-row"> 3209 <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/telecom.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span> 3210 <span class="nav-dd-text"> 3211 <span class="nav-dd-title">Telecom</span> 3212 <span class="nav-dd-desc">Voice, network, and contact centres</span> 3213 </span> 3214 </a> 3215 </div> 3216 </div> 3217 <a href="/case-studies" class="nav-link">Case Studies</a> 3218 <a href="/insights" class="nav-link">Insights</a> 3219 <a href="/about" class="nav-link">About</a> 3220 <a href="https://armakuni.keka.com/careers/" class="nav-link" target="_blank" rel="noopener noreferrer">Careers</a> 3221 </div> 3222 <a href="/contact" class="nav-cta">Contact us</a> 3223 <button class="nav-mobile-toggle" aria-label="Open menu" aria-expanded="false">â°</button> 3224</nav> 3225<!-- AKWriter:nav end --> 3226 3227<!-- SECTION 1: HERO - Fluid Ink (dark), category + tagline + concrete what-we-do --> 3228<section class="hero" id="hero" data-design-system-component="hero-a" data-hero-background="P-02" data-philosopher="tompkins" data-copy-section="hero"> 3229 <div class="hero-bg-fallback"></div> 3230 <canvas class="hero-bg-canvas" id="heroFluidInk" aria-hidden="true"></canvas> 3231 <div class="hero-bg-tint"></div> 3232 <div class="hero-fade"></div> 3233 <div class="hero-grid"></div> 3234 <div class="wrap"> 3235 <div class="hero-content"> 3236 <div class="eyebrow reveal" data-copy-id="hero.eyebrow">The engineering partner for the AI era</div> 3237 <h1 class="reveal" data-char-glow="" data-copy-id="hero.h1">Turning tomorrow's technology into today's unfair advantage.</h1> 3238 <p class="hero-what reveal" data-delay="1" data-copy-id="hero.body_0"> 3239 We plug AI into the systems your business already runs on AWS, with the engineering discipline that survives production. Your competitors stay one quarter behind. 3240 </p> 3241 <p class="hero-sub reveal" data-delay="2" data-copy-id="hero.body_1"> 3242 <strong>The AK Way</strong> is how we build it: cloud platforms, AI agents, and data products that still work after we leave. 3243 </p> 3244 <div class="hero-ctas reveal" data-delay="3"> 3245 <a href="#cta" class="btn btn-glow-pulse" data-copy-id="hero.cta_0">Start Building <span class="arr">â</span></a> 3246 <a href="#offerings" class="btn btn-ghost" data-copy-id="hero.cta_1">See what we build <span class="arr">â</span></a> 3247 <a href="/contact" class="hero-trust-note" data-copy-id="hero.body_2">Book a 30-min architecture review <span class="arr">â</span></a> 3248 </div> 3249 </div> 3250 </div> 3251</section> 3252 3253<!-- SECTION 2: LOGO WALL (dedicated trust section) --> 3254<section data-philosopher="kowalski" class="logo-wall" data-design-system-component="logo-wall" aria-label="Customer logos" data-copy-section="s1"> 3255 <div class="wrap"> 3256 <div class="logo-wall-lbl" data-copy-id="s1.body_0"><strong>Trusted by</strong> enterprises, banks, healthcare systems, and the world's biggest brands</div> 3257 </div> 3258 <div class="logo-marquee" aria-label="Customers we've worked with"> 3259 <div class="logo-marquee-track" id="logoTrack"> 3260 <img class="logo-trust" src="/assets/customer-logos/hyundai-glovis-white.webp" width="237" height="64" alt="Hyundai Glovis logo" loading="lazy" decoding="async"> 3261 <img class="logo-trust" src="/assets/customer-logos/pixis-w
3261hite.webp" width="211" height="64" alt="Pixis logo" loading="lazy" decoding="async"> 3262 <img class="logo-trust" src="/assets/customer-logos/goruck-white.webp" width="300" height="28" alt="GORUCK logo" loading="lazy" decoding="async"> 3263 <img class="logo-trust" src="/assets/customer-logos/sweet-analytics-white.webp" width="218" height="64" alt="Sweet Analytics logo" loading="lazy" decoding="async"> 3264 <img class="logo-trust" src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull logo" loading="lazy" decoding="async"> 3265 <img class="logo-trust" src="/assets/customer-logos/gavel-white.webp" width="113" height="64" alt="Gavel logo" loading="lazy" decoding="async"> 3266 <img class="logo-trust" src="/assets/customer-logos/carsaver-white.webp" width="258" height="64" alt="CarSaver logo" loading="lazy" decoding="async"> 3267 <img class="logo-trust" src="/assets/customer-logos/newton-white.webp" width="88" height="64" alt="Newton logo" loading="lazy" decoding="async"> 3268 <img class="logo-trust" src="/assets/customer-logos/reven-ai-white.webp" width="300" height="45" alt="Reven AI logo" loading="lazy" decoding="async"> 3269 <img class="logo-trust" src="/assets/customer-logos/solvpath-white.webp" width="300" height="57" alt="SolvPath logo" loading="lazy" decoding="async"> 3270 <img class="logo-trust" src="/assets/customer-logos/virgil-white.webp" width="170" height="64" alt="Virgil logo" loading="lazy" decoding="async"> 3271 <img class="logo-trust" src="/assets/customer-logos/rynoss-white.webp" width="161" height="64" alt="Ryno Strategic Solutions logo" loading="lazy" decoding="async"> 3272 <img class="logo-trust" src="/assets/customer-logos/hyundai-glovis-white.webp" width="237" height="64" alt="Hyundai Glovis logo" loading="lazy" decoding="async"> 3273 <img class="logo-trust" src="/assets/customer-logos/pixis-white.webp" width="211" height="64" alt="Pixis logo" loading="lazy" decoding="async"> 3274 <img class="logo-trust" src="/assets/customer-logos/goruck-white.webp" width="300" height="28" alt="GORUCK logo" loading="lazy" decoding="async"> 3275 <img class="logo-trust" src="/assets/customer-logos/sweet-analytics-white.webp" width="218" height="64" alt="Sweet Analytics logo" loading="lazy" decoding="async"> 3276 <img class="logo-trust" src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull logo" loading="lazy" decoding="async"> 3277 <img class="logo-trust" src="/assets/customer-logos/gavel-white.webp" width="113" height="64" alt="Gavel logo" loading="lazy" decoding="async"> 3278 <img class="logo-trust" src="/assets/customer-logos/carsaver-white.webp" width="258" height="64" alt="CarSaver logo" loading="lazy" decoding="async"> 3279 <img class="logo-trust" src="/assets/customer-logos/newton-white.webp" width="88" height="64" alt="Newton logo" loading="lazy" decoding="async"> 3280 <img class="logo-trust" src="/assets/customer-logos/reven-ai-white.webp" width="300" height="45" alt="Reven AI logo" loading="lazy" decoding="async"> 3281 <img class="logo-trust" src="/assets/customer-logos/solvpath-white.webp" width="300" height="57" alt="SolvPath logo" loading="lazy" decoding="async"> 3282 <img class="logo-trust" src="/assets/customer-logos/virgil-white.webp" width="170" height="64" alt="Virgil logo" loading="lazy" decoding="async"> 3283 <img class="logo-trust" src="/assets/customer-logos/rynoss-white.webp" width="161" height="64" alt="Ryno Strategic Solutions logo" loading="lazy" decoding="async"> 3284 </div> 3285 </div> 3286</section> 3287 3288<!-- SECTION 3: CASE STUDY CAROUSEL - canonical tm-sec from design system 3289 Each slide proves a different offering, so the section carries the AK Way 3290 thread (qualify â foundation â build â hand over) without a separate explainer. --> 3291<section data-philosopher="tompkins" class="tm-sec" id="case-studies" data-design-system-component="testimonial-carousel" data-copy-section="s2"> 3292 <div class="tm-glow"></div> 3293 <div class="wrap"> 3294 <div class="tm-layout"> 3295 <div class="tm-content reveal"> 3296 <span class="eyebrow" data-copy-id="s2.eyebrow">The AK Way in production</span> 3297 <h2 class="reveal" data-char-glow="" data-copy-id="s2.h2">Engineering discipline applied across every offering.</h2> 3298 <p class="tm-tagline reveal" data-delay="1">
3298Here's what it built.</p> 3299 <div class="tm-nav"> 3300 <button class="tm-arrow" id="tmPrev" aria-label="Previous case study"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></button> 3301 <button class="tm-arrow" id="tmNext" aria-label="Next case study"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button> 3302 </div> 3303 </div> 3304 <div class="tm-viewport reveal" data-delay="1"> 3305 <div class="tm-track" id="tmTrack"> 3306 3307 <!-- 1. Comic Relief. Modernization --> 3308 <div class="tm-slide"> 3309 <div class="tm-slide-header"> 3310 <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/armakuni-com/homepage/comic-relief.webp" width="65" height="65" alt="Comic Relief" decoding="async" loading="lazy"></div> 3311 <div class="tm-tag">Modernization</div> 3312 </div> 3313 <div class="tm-system">Live BBC donation platform.</div> 3314 <hr class="tm-divider"> 3315 <blockquote data-copy-id="s2.body_0">Armakuni was a game-changer for Comic Relief; they built us a new donation platform, on time and on budget while also helping us break the GBP 100 million mark for the first time.</blockquote> 3316 <div class="tm-footer"><div><div class="tm-name">Derek Gannon</div><div class="tm-role">COO, Comic Relief</div></div></div> 3317 </div> 3318 3319 <!-- 2. HSBC. Cloud Native Delivery --> 3320 <div class="tm-slide"> 3321 <div class="tm-slide-header"> 3322 <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/hsbc.svg" width="316" height="85" alt="HSBC" decoding="async" loading="lazy"></div> 3323 <div class="tm-tag">Cloud Native Delivery</div> 3324 </div> 3325 <div class="tm-system">Global banking, delivered cloud-native at scale.</div> 3326 <hr class="tm-divider"> 3327 <blockquote data-copy-id="s2.body_1">HSBC adopted cloud-native delivery through the AK Way. Automated pipelines, continuous testing, and engineering discipline applied at global-bank scale.</blockquote> 3328 <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div> 3329 </div> 3330 3331 <!-- 3. JPMorgan Chase. Enterprise Banking --> 3332 <div class="tm-slide"> 3333 <div class="tm-slide-header"> 3334 <div class="tm-logo-mark"><img src="/assets/customer-logos/jp-morgan-chase.svg" width="1000" height="142" alt="JPMorgan Chase" decoding="async" loading="lazy"></div> 3335 <div class="tm-tag">Enterprise Banking</div> 3336 </div> 3337 <div class="tm-system">Global investment and commercial banking on AWS.</div> 3338 <hr class="tm-divider"> 3339 <blockquote data-copy-id="s2.body_2">JPMorgan Chase is one of five of the world's largest financial institutions Armakuni has delivered AWS engineering work for. Proof the AK Way holds at systemically important scale.</blockquote> 3340 <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div> 3341 </div> 3342 3343 <!-- 4. Red Bull. Media & Entertainment --> 3344 <div class="tm-slide"> 3345 <div class="tm-slide-header"> 3346 <div class="tm-logo-mark"><img src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull" decoding="async" loading="lazy"></div> 3347 <div class="tm-tag">Media & Entertainment</div> 3348 </div> 3349 <div class="tm-system">Global sports and media brand, engineered for scale.</div> 3350 <hr class="tm-divider"> 3351 <blockquote data-copy-id="s2.body_3">Red Bull is part of Armakuni's media and entertainment portfolio. Proof the AK Way extends beyond financial services into global consumer brands.</blockquote> 3352 <div class="tm-footer"><div><div class="tm-role">Media & Entertainment · Global Brand</div></div></div> 3353 </div> 3354 3355 <!-- 5. Ryno Strategic Solutions. AI Transformation --> 3356 <div class="tm-slide"> 3357 <div class="tm-slide-header"> 3358 <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/rynoss.webp" width="161" height="64" alt="Ryno Strategic Solutions" decoding="async" loading="lazy"></div> 3359 <div class="tm-tag">AI Transformation</div> 3360 </div> 3361 <div class="tm-system">
3361Home services marketing intelligence, built on AWS.</div> 3362 <hr class="tm-divider"> 3363 <blockquote data-copy-id="s2.body_4">Ryno's internal team had already tried and failed to reach production quality on AI call analysis. Armakuni's PoC was production-ready in under two weeks of a four-week window.</blockquote> 3364 <div class="tm-footer"><div><div class="tm-role">AI Transformation · Home Services Marketing Intelligence</div></div></div> 3365 </div> 3366 3367 <!-- 6. Santander. Engineering Transformation --> 3368 <div class="tm-slide"> 3369 <div class="tm-slide-header"> 3370 <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/armakuni-com/homepage/santander.webp" width="278" height="69" alt="Santander" decoding="async" loading="lazy"></div> 3371 <div class="tm-tag">Engineering Transformation</div> 3372 </div> 3373 <div class="tm-system">Global retail and commercial banking, engineered the AK Way.</div> 3374 <hr class="tm-divider"> 3375 <blockquote data-copy-id="s2.body_5">Santander transformed its engineering teams through "The Engineering Way." Everything as code, automated testing, and a high-velocity cloud-native delivery force built on the AK Way.</blockquote> 3376 <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div> 3377 </div> 3378 3379 <!-- 7. Hyundai Glovis. Pods --> 3380 <div class="tm-slide"> 3381 <div class="tm-slide-header"> 3382 <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/hyundai-glovis.webp" width="237" height="64" alt="Hyundai Glovis" decoding="async" loading="lazy"></div> 3383 <div class="tm-tag">Pods</div> 3384 </div> 3385 <div class="tm-system">Real-time vehicle-tracking platform for finished-vehicle logistics.</div> 3386 <hr class="tm-divider"> 3387 <blockquote data-copy-id="s2.body_6">45% increase in on-time vehicle deliveries, replacing a reactive model where delays were only discovered after they'd already cost the customer.</blockquote> 3388 <div class="tm-footer"><div><div class="tm-role">Pods · Automotive Logistics</div></div></div> 3389 </div> 3390 3391 </div> 3392 </div> 3393 </div> 3394 </div> 3395</section> 3396 3397<!-- SECTION 4: OFFERINGS - icon-tile-row (design-system.html component #56) 3398 7 offerings, each with a Gemini-rendered 3D isometric illustration --> 3399<section data-philosopher="krehel" class="itr-section" id="offerings" data-design-system-component="icon-tile-row" data-copy-section="s3"> 3400 <div class="wrap"> 3401 <div class="itr-head"> 3402 <div> 3403 <span class="eyebrow reveal" data-copy-id="s3.eyebrow">What we build</span> 3404 <h2 class="reveal" data-char-glow="" data-copy-id="s3.h2">Seven ways we turn tomorrow's technology<br>into today's unfair advantage.</h2> 3405 </div> 3406 </div> 3407 <div class="itr-container reveal" data-delay="1"> 3408 <div class="itr-grid" data-cols="4"> 3409 <a href="/offerings/modernization-with-ai" class="itr-tile" data-offering-theme="blue"> 3410 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-01-modernization.webp" width="480" height="480" alt="Modernization with AI - legacy systems transforming into cloud-native modules" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-01-modernization-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-01-modernization.webp 480w" sizes="242px"></div> 3411 <div class="itr-name">Modernization with AI</div> 3412 <p class="itr-desc" data-copy-id="s3.body_0">The engineering foundation that makes AI modernization actually work. Not faster ways to generate technical debt.</p> 3413 </a> 3414 <a href="/offerings/gen-ai-and-agentic-ai" class="itr-tile" data-offering-theme="pink"> 3415 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-02-genai.webp" width="480" height="480" alt="AI Transformation - central AI core with orbiting agent nodes" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-02-genai-320w.webp 320w, /illustrations/armaku
3415ni-homepage-2026/offering-02-genai.webp 480w" sizes="242px"></div> 3416 <div class="itr-name">AI Transformation</div> 3417 <p class="itr-desc" data-copy-id="s3.body_1">From curious about AI to shipping it in production. PUSH qualifies the right bets. Gen AI Delivery Lab builds them.</p> 3418 </a> 3419 <a href="/offerings/amazon-connect" class="itr-tile" data-offering-theme="cyan"> 3420 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-03-connect.webp" width="480" height="480" alt="Connect Customer - contact-centre hub with sentiment and waveform panels" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-03-connect-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-03-connect.webp 480w" sizes="242px"></div> 3421 <div class="itr-name">Connect Customer</div> 3422 <p class="itr-desc" data-copy-id="s3.body_2">40,000+ calls analyzed daily. Automated sentiment. Real-time coaching. Contact centres rebuilt with intelligence built in.</p> 3423 </a> 3424 <a href="/offerings/migration" class="itr-tile" data-offering-theme="orange"> 3425 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-04-migration.webp" width="480" height="480" alt="Migration with Agentic AI - servers migrating to cloud via agent-coordinated pipeline" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-04-migration-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-04-migration.webp 480w" sizes="242px"></div> 3426 <div class="itr-name">Migration with Agentic AI</div> 3427 <p class="itr-desc" data-copy-id="s3.body_3">Agentic tooling with fixed scope and fixed price. Legacy to AWS, with disaster recovery built in.</p> 3428 </a> 3429 <a href="/offerings/app-dev-pods" class="itr-tile" data-offering-theme="green"> 3430 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-05-pods.webp" width="480" height="480" alt="App & Product Dev with PODs - engineering team collaborating around shared code" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-05-pods-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-05-pods.webp 480w" sizes="242px"></div> 3431 <div class="itr-name">App & Product Dev with PODs</div> 3432 <p class="itr-desc" data-copy-id="s3.body_4">Named engineers in your repos, your standups, your deploys. When we leave, your team runs everything we built.</p> 3433 </a> 3434 <a href="/offerings/data-engineering" class="itr-tile" data-offering-theme="deep-blue"> 3435 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-06-data.webp" width="480" height="480" alt="Data Engineering - data pipeline flowing through AWS processing hub to analytics" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-06-data-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-06-data.webp 480w" sizes="242px"></div> 3436 <div class="itr-name">Data Engineering</div> 3437 <p class="itr-desc" data-copy-id="s3.body_5">Cloud-native platforms on AWS that turn data into decisions. For clinicians, traders, policy makers.</p> 3438 </a> 3439 <a href="/offerings/managed-services" class="itr-tile" data-offering-theme="coral"> 3440 <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-07-managed.webp" width="480" height="480" alt="Managed Services - central monitoring dashboard with operational pods orbit" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-07-managed-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-07-managed.webp 480w" sizes="242px"></div> 3441 <div class="itr-name">Managed Services</div> 3442 <p class="itr-desc" data-copy-id="s3.body_6">AI-powered managed operations. Dedicated PODs, not ticket queues. The same engineers who built it keep running it.</p> 3443 </a> 3444 <a href="/contact" class="itr-tile itr-tile--cta" data-offering-theme="cta" aria-label="Talk to a senior architect. Book a 30-minute review" style="justify-content:center; align-items:flex-start;
3444 background:linear-gradient(160deg, rgba(45,98,255,0.22) 0%, rgba(0,155,229,0.16) 50%, rgba(123,198,255,0.10) 100%); border:1.5px solid var(--accent-bright); box-shadow:0 0 0 1px rgba(123,198,255,0.18) inset, 0 18px 48px -22px rgba(45,98,255,0.55);"> 3445 <div class="itr-cta-eyebrow" style="font-size:10.5px; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent-bright); font-family:var(--f-m); margin-bottom:8px;">Talk to us</div> 3446 <div class="itr-img" style="aspect-ratio:1/1; background:radial-gradient(circle at center, rgba(123,198,255,0.30), rgba(45,98,255,0.10) 60%, transparent 82%); display:flex; align-items:center; justify-content:center; border:1px dashed rgba(123,198,255,0.45); border-radius:14px;"> 3447 <!-- Whiteboard + conversation glyph: a frosted board with a cyan diagonal 3448 sketch line and a small accent dot. matches the "sketch a fix live" 3449 promise without leaning on AWS-orange. --> 3450 <svg viewBox="0 0 56 56" width="64" height="64" fill="none" aria-hidden="true"> 3451 <rect x="9" y="13" width="38" height="26" rx="3" stroke="var(--accent-bright)" stroke-width="1.6" fill="rgba(123,198,255,0.08)"></rect> 3452 <path d="M14 30 Q22 19, 30 24 T44 19" stroke="var(--accent-bright)" stroke-width="1.8" stroke-linecap="round" fill="none"></path> 3453 <circle cx="44" cy="19" r="2.2" fill="var(--accent-bright)"></circle> 3454 <line x1="22" y1="39" x2="22" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line> 3455 <line x1="34" y1="39" x2="34" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line> 3456 <line x1="18" y1="44" x2="38" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line> 3457 </svg> 3458 </div> 3459 <div class="itr-name" style="color:var(--accent-bright);">Sketch a fix, live.</div> 3460 <p class="itr-desc" data-copy-id="s3.body_7">Bring your toughest AWS or AI problem to a 30-minute call with a senior architect. We diagram the fix on screen, send you the canvas, and tell you whether we should be the team that ships it.</p> 3461 <div class="itr-meta" style="color:var(--accent-bright); font-weight:500;">Book the architect â</div> 3462 </a> 3463 </div> 3464 </div> 3465 </div> 3466</section> 3467 3468<!-- SECTION 5: HORIZONTAL TIMELINE - compact, "just show" --> 3469<section class="timeline-section-h" id="timeline" data-design-system-component="timeline-horizontal" data-copy-section="s4"> 3470 <div class="wrap"> 3471 <div class="eyebrow-wrap"><span class="eyebrow reveal" data-copy-id="s4.eyebrow">Thirteen years of AWS delivery</span></div> 3472 <h2 class="reveal" data-char-glow="" data-copy-id="s4.h2">Three AWS eras. We've shipped through all of them.</h2> 3473 <div class="timeline-track" id="timelineTrackH"> 3474 <div class="timeline-line"><div class="timeline-line-fill" id="tlLineFill"></div></div> 3475 <div class="t-era reveal" data-era="0" data-delay="1"> 3476 <div class="t-era-dot"></div> 3477 <div class="t-era-year">2012</div> 3478 <div class="t-era-headline">Comic Relief. Live BBC. GBP 100M in donations. Zero downtime.</div> 3479 <div class="t-era-note">4 engineers · 500 tx/sec · the beginning</div> 3480 </div> 3481 <div class="t-era reveal" data-era="1" data-delay="2"> 3482 <div class="t-era-dot"></div> 3483 <div class="t-era-year">2018</div> 3484 <div class="t-era-headline">First Team Topologies Solution Partner worldwide.</div> 3485 <div class="t-era-note">Matthew Skelton picked us for the work, not the book</div> 3486 </div> 3487 <div class="t-era reveal" data-era="2" data-delay="3"> 3488 <div class="t-era-dot"></div> 3489 <div class="t-era-year">2023</div> 3490 <div class="t-era-headline">
3490AWS Premier Tier Partner. 100+ successful deliveries on AWS.</div> 3491 <div class="t-era-note">11 years of discipline, recognized at the top tier</div> 3492 </div> 3493 <div class="t-era reveal" data-era="3" data-delay="4"> 3494 <div class="t-era-dot"></div> 3495 <div class="t-era-year">2026</div> 3496 <div class="t-era-headline">AWS Premier. 9 competencies. 1,300+ engineers. 9 verticals.</div> 3497 <div class="t-era-note">Agentic AI Specialization · 1,300+ engineers across three offices</div> 3498 </div> 3499 </div> 3500 </div> 3501</section> 3502 3503<!-- SECTION 6: HOW WE WORK. The AK Way, four named loops + named IP per step --> 3504<section class="process-section" id="process" data-design-system-component="process-flow" data-philosopher="kowalski" data-copy-section="s5"> 3505 <div class="wrap"> 3506 <div class="process-head"> 3507 <span class="eyebrow reveal" data-copy-id="s5.eyebrow">The AK Way</span> 3508 <h2 class="reveal" data-char-glow="" data-copy-id="s5.h2">Four loops. One discipline. <br>Everything we ship runs on it.</h2> 3509 </div> 3510 <div class="process-flow" id="processFlow"> 3511 <div class="process-step reveal" data-step-index="0"> 3512 <div class="process-step-dot"></div> 3513 <h3 data-copy-id="s5.sub_0">Qualify the right bets.</h3> 3514 <p data-copy-id="s5.body_0"><strong>PUSH</strong> qualifies AI initiatives. <strong>Compass</strong> does it for modernization portfolios. Both produce a CFO-ready model.</p> 3515 <div class="process-step-metric">50% cost cuts · 80% faster processing</div> 3516 </div> 3517 <div class="process-step reveal" data-step-index="1" data-delay="1"> 3518 <div class="process-step-dot"></div> 3519 <h3 data-copy-id="s5.sub_1">Get the foundation honest.</h3> 3520 <p data-copy-id="s5.body_1"><strong>PULL</strong> aligns data strategy. <strong>Axiom</strong> ships the semantic layer so agents call definitions, not tables.</p> 3521 <div class="process-step-metric">dbt + Knowledge Bases · your IAM</div> 3522 </div> 3523 <div class="process-step reveal" data-step-index="2" data-delay="2"> 3524 <div class="process-step-dot"></div> 3525 <h3 data-copy-id="s5.sub_2">Build alongside, not instead of.</h3> 3526 <p data-copy-id="s5.body_2"><strong>Evolve</strong> ships AK Way practices first, then agents modernize in priority order. Named pods. Fixed scope. Fixed price.</p> 3527 <div class="process-step-metric">Same repos · same standups · same accountability</div> 3528 </div> 3529 <div class="process-step reveal" data-step-index="3" data-delay="3"> 3530 <div class="process-step-dot"></div> 3531 <h3 data-copy-id="s5.sub_3">Hand over everything.</h3> 3532 <p data-copy-id="s5.body_3">Your team runs what we built, because they built it alongside us. Knowledge transfer every sprint, not a phase at the end.</p> 3533 <div class="process-step-metric">Your AWS account · your IAM · your team</div> 3534 </div> 3535 </div> 3536 </div> 3537</section> 3538 3539<!-- SECTION 7: INDUSTRIES - illustration-dominant tall cards (Retool pattern) --> 3540<section data-philosopher="tompkins" class="industries-section" id="industries" data-design-system-component="industry-illus-carousel" data-copy-section="s6"> 3541 <div class="wrap"> 3542 <div class="industries-head"> 3543 <div> 3544 <span class="eyebrow reveal" data-copy-id="s6.eyebrow">Where we ship</span> 3545 <h2 class="reveal" data-char-glow="" data-copy-id="s6.h2">Engineering discipline applied<br>across nine industries.</h2> 3546 </div> 3547 <div class="industries-nav reveal" data-delay="1"> 3548 <button class="ind-arrow-btn" id="indPrev" aria-label="Previous industries">â</button> 3549 <button class="ind-arrow-btn" id="indNext" aria-label="Next industries">â</button> 3550 </div> 3551 </div> 3552 </div> 3553 <div class="horizontal-scroll reveal" data-delay="1" id="industriesScroll"> 3554 <a href="/industries/financial-services" class="ind-card" data-offering-theme="blue"> 3555 <img src="/illustrations/armakuni-homepage-2026/industry-financial.webp" width="576" height="768" alt="Financial Services - 3D glass bank pillar with regulator and product rail
3555s converging" class="ind-card-img" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/industry-financial-320w.webp 320w, /illustrations/armakuni-homepage-2026/industry-financial.webp 576w" sizes="292px"> 3556 <div class="ind-card-shade"></div> 3557 <div class="ind-card-arrow">â</div> 3558 <div class="ind-card-content"> 3559 <span class="ind-card-meta">Santander · JP Morgan · HSBC</span> 3560 <div class="ind-card-name">Financial Services</div> 3561 <p class="ind-card-hook" data-copy-id="s6.body_0">Banks that ship like startups. 40% faster TTM. 50% lower infra cost.</p> 3562 </div> 3563 </a> 3564 <a href="/industries/healthcare" class="ind-card" data-offering-theme="deep-blue"> 3565 <img src="/illustrations/armakuni-homepage-2026/industry-healthcare.webp" width="576" height="768" alt="Healthcare - 3D glass medical cross with HIPAA-aligned workload migration ribbon" class="ind-card-img" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/industry-healthcare-320w.webp 320w, /illustrations/armakuni-homepage-2026/industry-healthcare.webp 576w" sizes="292px"> 3566 <div class="ind-card-shade"></div> 3567 <div class="ind-card-arrow">â</div> 3568 <div class="ind-card-content"> 3569 <span class="ind-card-meta">NHS Wales · 1Team · Identity verification</span> 3570 <div class="ind-card-name">Healthcare</div> 3571 <p class="ind-card-hook" data-copy-id="s6.body_1">Data that keeps up with decisions. Days to 2 minutes. 90% more accurate.</p> 3572 </div> 3573 </a> 3574 <a href="/industries/manufacturing" class="ind-card" data-offering-theme="orange"> 3575 <img src="/illustrations/armakuni-homepage-2026/industry-manufacturing.webp" width="576" height="768" alt="Manufacturing - 3D glass factory chimney with supply-chain telemetry pods" class="ind-card-img" decoding="async" loading="lazy"> 3576 <div class="ind-card-shade"></div> 3577 <div class="ind-card-arrow">â</div> 3578 <div class="ind-card-content"> 3579 <span class="ind-card-meta">Renesas · Hyundai Glovis</span> 3580 <div class="ind-card-name">Manufacturing</div> 3581 <p class="ind-card-hook" data-copy-id="s6.body_2">Precision that scales. Order processing cut in half. 70% data sync uplift.</p> 3582 </div> 3583 </a> 3584 <a href="/industries/media-entertainment" class="ind-card" data-offering-theme="pink"> 3585 <img src="/illustrations/armakuni-homepage-2026/industry-media.webp" width="576" height="768" alt="Media and Entertainment - 3D glass broadcast tower with live event spike" class="ind-card-img" decoding="async" loading="lazy"> 3586 <div class="ind-card-shade"></div> 3587 <div class="ind-card-arrow">â</div> 3588 <div class="ind-card-content"> 3589 <span class="ind-card-meta">Red Bull · News UK · Comic Relief</span> 3590 <div class="ind-card-name">Media & Entertainment</div> 3591 <p class="ind-card-hook" data-copy-id="s6.body_3">Live, at scale, without fear. 1,500+ events a year. 80% less overhead.</p> 3592 </div> 3593 </a> 3594 <a href="/industries/saas-isv" class="ind-card" data-offering-theme="cyan"> 3595 <img src="/illustrations/armakuni-homepage-2026/industry-saas.webp" width="576" height="768" alt="SaaS and ISV - 3D glass cloud platform with API modules and data veins" class="ind-card-img" decoding="async" loading="lazy"> 3596 <div class="ind-card-shade"></div> 3597 <div class="ind-card-arrow">â</div> 3598 <div class="ind-card-content"> 3599 <span class="ind-card-meta">Sweet Analytics</span> 3600 <div class="ind-card-name">SaaS & ISV</div> 3601 <p class="ind-card-hook" data-copy-id="s6.body_4">Legacy out, AWS in. 5 months end-to-end. $1.5M saved a year.</p> 3602 </div> 3603 </a> 3604 <a href="/industries/telecom" class="ind-card" data-offering-theme="blue"> 3605 <img src="/illustrations/armakuni-homepage-2026/industry-telecom.webp" width="576" height="768" alt="Telecom - 3D glass satellite dish migrating from legacy switch to AWS" class="ind-card-img" decoding="async" loading="lazy"> 3606 <div class="ind-card-shade"></div> 3607 <div class="ind-card-arrow">â</div> 3608 <div class="ind-card-content">
3609 <span class="ind-card-meta">One of the largest cinema networks in the U.S. · A regulated Medicare insurance enrollment and engagement company · A US-based employee benefits technology company</span> 3610 <div class="ind-card-name">Telecom</div> 3611 <p class="ind-card-hook" data-copy-id="s6.body_5">Voice operations on Amazon Connect. Real-time AI. Compliance built in.</p> 3612 </div> 3613 </a> 3614 <a href="/industries/public-sector" class="ind-card" data-offering-theme="green"> 3615 <img src="/illustrations/armakuni-homepage-2026/industry-public.webp" width="576" height="768" alt="Public Sector - 3D glass civic dome with voice-first AI access arcs" class="ind-card-img" decoding="async" loading="lazy"> 3616 <div class="ind-card-shade"></div> 3617 <div class="ind-card-arrow">â</div> 3618 <div class="ind-card-content"> 3619 <span class="ind-card-meta">Latin American hyperlocal social marketplace and community platform · Voice-first AI</span> 3620 <div class="ind-card-name">Public Sector</div> 3621 <p class="ind-card-hook" data-copy-id="s6.body_6">Voice-first AI for citizens who don't fill in web forms. Accessible by default, audited by the regulator.</p> 3622 </div> 3623 </a> 3624 <a href="/industries/retail-ecommerce" class="ind-card" data-offering-theme="orange"> 3625 <img src="/illustrations/armakuni-homepage-2026/industry-retail.webp" width="576" height="768" alt="Retail and E-commerce - 3D glass fulfilment hub with real-time recommendation rays" class="ind-card-img" decoding="async" loading="lazy"> 3626 <div class="ind-card-shade"></div> 3627 <div class="ind-card-arrow">â</div> 3628 <div class="ind-card-content"> 3629 <span class="ind-card-meta">Leading smart kitchen appliance brand, United States · SMS campaign automation platform for e-commerce and restaurant brands</span> 3630 <div class="ind-card-name">Retail & E-commerce</div> 3631 <p class="ind-card-hook" data-copy-id="s6.body_7">Real-time campaigns. Item-level recommendations. Multi-channel fulfilment.</p> 3632 </div> 3633 </a> 3634 <a href="/industries/private-equity-vc" class="ind-card" data-offering-theme="coral"> 3635 <img src="/illustrations/armakuni-homepage-2026/industry-pe-vc.webp" width="576" height="768" alt="Private Equity and VC - 3D glass portfolio slab with stacked asset cubes and KPI dashboards" class="ind-card-img" decoding="async" loading="lazy"> 3636 <div class="ind-card-shade"></div> 3637 <div class="ind-card-arrow">â</div> 3638 <div class="ind-card-content"> 3639 <span class="ind-card-meta">A leading global consumer appliances company · Leading insurance broker management system provider in Canada</span> 3640 <div class="ind-card-name">Private Equity & VC</div> 3641 <p class="ind-card-hook" data-copy-id="s6.body_8">Portfolio engineering maturity. Diligence to value creation. Fixed scope, board-ready.</p> 3642 </div> 3643 </a> 3644 </div> 3645</section> 3646 3647<!-- SECTION 8: CREDENTIALS (1 line + badges + AWS partnership strip) --> 3648<section class="credentials-section" id="credentials" data-copy-section="s7"> 3649 <div class="wrap"> 3650 3651 <!-- Headline --> 3652 <div class="cred-headline reveal" data-char-glow="">Fixed scope. Fixed price. Your team owns everything we build.</div> 3653 3654 <!-- Stats --> 3655 <div class="cred-stats reveal" data-delay="1"> 3656 <div class="cred-stat"> 3657 <div class="cred-stat-num">2012</div> 3658 <div class="cred-stat-label">Founded year</div> 3659 </div> 3660 <div class="cred-stat"> 3661 <div class="cred-stat-num">1,300+</div> 3662 <div class="cred-stat-label">Engineers</div> 3663 </div> 3664 <div class="cred-stat"> 3665 <div class="cred-stat-num">300+</div> 3666 <div class="cred-stat-label">AWS certifications</div> 3667 </div> 3668 </div> 3669 3670 <!-- Main: left = live badge display, right = tabbed list --> 3671 <div class="cred-main"> 3672 3673 <!-- Left: shows the badge currently in focus in the list --> 3674 <div class="cred-badge-display reveal" data-delay="1"> 3675 <!-- Populated at runtime by the badge list below. The AWS badges are 3676 SVG, so there is no WebP variant to offer; the <picture>/<source> 3677 that used to wrap this only ever received an empty srcset. --> 3678 <img class="cred-badge-display-img" src="" alt="" loading="eager" decoding="async"> 3679 </div> 3680 3681 <div class="cred-tabs-panel reveal" data-delay="2"> 3682 <div class="cred-tabs" role="tablist"> 3683 <button class="cred-tab active" role="tab" data-tab="competencies" aria-controls="cred-pane-competencies">Competencies</button> 3684 <button class="cred-tab" role="tab" data-tab="sdp" aria-controls="cred-pane-sdp">SDP</button> 3685 </div> 3686 3687 <!-- Competencies (11 badges) --> 3688 <div class="cred-tab-pane active" id="cred-pane-competencies" role="tabpanel"> 3689 <div class="cred-badge-list"> 3690 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/migration-competency-orange.svg" data-badge-srcset="" data-badge-alt="AWS Migration and Modernization Competency"> 3691 <img src="/assets/aws-badges/migration-competency-orange.svg" width="176" height="176" alt="AWS Migration and Modernization Competency" loading="lazy" decoding="async">
3692 <span class="cred-badge-name">Migration and Modernization Competency</span> 3693 </div> 3694 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/ai-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS AI Services Competency"> 3695 <img src="/assets/aws-badges/ai-services-competency.svg" width="176" height="176" alt="AWS AI Services Competency" loading="lazy" decoding="async"> 3696 <span class="cred-badge-name">AI Services Competency</span> 3697 </div> 3698 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/data-analytics-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS Data and Analytics Consulting Competency"> 3699 <img src="/assets/aws-badges/data-analytics-consulting-competency.svg" width="176" height="176" alt="AWS Data and Analytics Consulting Competency" loading="lazy" decoding="async"> 3700 <span class="cred-badge-name">Data & Analytics Consulting Competency</span> 3701 </div> 3702 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/devops-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS DevOps Consulting Competency"> 3703 <img src="/assets/aws-badges/devops-consulting-competency.svg" width="176" height="176" alt="AWS DevOps Consulting Competency" loading="lazy" decoding="async"> 3704 <span class="cred-badge-name">DevOps Consulting Competency</span> 3705 </div> 3706 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/saas-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS SaaS Consulting Competency"> 3707 <img src="/assets/aws-badges/saas-consulting-competency.svg" width="176" height="176" alt="AWS SaaS Consulting Competency" loading="lazy" decoding="async"> 3708 <span class="cred-badge-name">SaaS Consulting Competency</span> 3709 </div> 3710 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/resilience-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Resilience Services Competency"> 3711 <img src="/assets/aws-badges/resilience-services-competency.svg" width="176" height="176" alt="AWS Resilience Services Competency" loading="lazy" decoding="async"> 3712 <span class="cred-badge-name">Resilience Services Competency</span> 3713 </div> 3714 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/migration-and-modernization-services.svg" data-badge-srcset="" data-badge-alt="AWS Migration and Modernization Services"> 3715 <img src="/assets/aws-badges/migration-and-modernization-services.svg" width="176" height="176" alt="AWS Migration and Modernization Services" loading="lazy" decoding="async"> 3716 <span class="cred-badge-name">Migration and Modernization Consulting Competency</span> 3717 </div> 3718 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/small-and-medium-business-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Small and Medium Business Services Competency"> 3719 <img src="/assets/aws-badges/small-and-medium-business-services-competency.svg" width="176" height="176" alt="AWS Small and Medium Business Services Competency" loading="lazy" decoding="async"> 3720 <span class="cred-badge-name">Small and Medium Business Services Competency</span> 3721 </div> 3722 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/supply-chain-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Supply Chain Services Competency"> 3723 <img src="/assets/aws-badges/supply-chain-services-competency.svg" width="176" height="176" alt="AWS Supply Chain Services Competency" loading="lazy" decoding="async"> 3724 <span class="cred-badge-name">Supply Chain Services Competency</span> 3725 </div> 3726 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/healthcare-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS Healthcare Consulting Competency"> 3727 <img src="/assets/aws-badges/healthcare-consulting-competency.svg" width="176" height="176" alt="AWS Healthcare Consulting Competency" loading="lazy" decoding="async">
3728 <span class="cred-badge-name">Healthcare Consulting Competency</span> 3729 </div> 3730 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/advertising-and-marketing-technology-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Advertising and Marketing Technology Competency"> 3731 <img src="/assets/aws-badges/advertising-and-marketing-technology-services-competency.svg" width="176" height="176" alt="AWS Advertising and Marketing Technology Competency" loading="lazy" decoding="async"> 3732 <span class="cred-badge-name">Advertising and Marketing Technology Services Competency</span> 3733 </div> 3734 </div> 3735 </div> 3736 3737 <!-- SDP (16 badges) --> 3738 <div class="cred-tab-pane" id="cred-pane-sdp" role="tabpanel"> 3739 <div class="cred-badge-list"> 3740 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-connect-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon Connect Service Delivery"> 3741 <img src="/assets/aws-badges/amazon-connect-delivery.svg" width="176" height="176" alt="Amazon Connect Service Delivery" loading="lazy" decoding="async"> 3742 <span class="cred-badge-name">Amazon Connect Delivery</span> 3743 </div> 3744 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-lambda-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Lambda Service Delivery"> 3745 <img src="/assets/aws-badges/aws-lambda-delivery.svg" width="176" height="176" alt="AWS Lambda Service Delivery" loading="lazy" decoding="async"> 3746 <span class="cred-badge-name">AWS Lambda Delivery</span> 3747 </div> 3748 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-ecs-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon ECS Service Delivery"> 3749 <img src="/assets/aws-badges/amazon-ecs-delivery.svg" width="176" height="176" alt="Amazon ECS Service Delivery" loading="lazy" decoding="async"> 3750 <span class="cred-badge-name">Amazon ECS Delivery</span> 3751 </div> 3752 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-eks-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon EKS Service Delivery"> 3753 <img src="/assets/aws-badges/amazon-eks-delivery.svg" width="176" height="176" alt="Amazon EKS Service Delivery" loading="lazy" decoding="async"> 3754 <span class="cred-badge-name">Amazon EKS Delivery</span> 3755 </div> 3756 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-glue-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Glue Service Delivery"> 3757 <img src="/assets/aws-badges/aws-glue-delivery.svg" width="176" height="176" alt="AWS Glue Service Delivery" loading="lazy" decoding="async"> 3758 <span class="cred-badge-name">AWS Glue Delivery</span> 3759 </div> 3760 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-rds-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon RDS Service Delivery"> 3761 <img src="/assets/aws-badges/amazon-rds-delivery.svg" width="176" height="176" alt="Amazon RDS Service Delivery" loading="lazy" decoding="async"> 3762 <span class="cred-badge-name">Amazon RDS Delivery</span> 3763 </div> 3764 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-dynamodb-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon DynamoDB Service Delivery"> 3765 <img src="/assets/aws-badges/amazon-dynamodb-delivery.svg" width="176" height="178" alt="Amazon DynamoDB Service Delivery" loading="lazy" decoding="async"> 3766 <span class="cred-badge-name">Amazon DynamoDB Delivery</span> 3767 </div> 3768 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-cloudfront-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon CloudFront Service Delivery"> 3769 <img src="/assets/aws-badges/amazon-cloudfront-delivery.svg" width="176" height="176" alt="Amazon CloudFront Service Delivery" loading="lazy" decoding="async">
3770 <span class="cred-badge-name">Amazon CloudFront Delivery</span> 3771 </div> 3772 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-api-gateway-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon API Gateway Service Delivery"> 3773 <img src="/assets/aws-badges/amazon-api-gateway-delivery.svg" width="176" height="176" alt="Amazon API Gateway Service Delivery" loading="lazy" decoding="async"> 3774 <span class="cred-badge-name">Amazon API Gateway Delivery</span> 3775 </div> 3776 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-opensearch-service-deliver.svg" data-badge-srcset="" data-badge-alt="Amazon OpenSearch Service Delivery"> 3777 <img src="/assets/aws-badges/amazon-opensearch-service-deliver.svg" width="176" height="176" alt="Amazon OpenSearch Service Delivery" loading="lazy" decoding="async"> 3778 <span class="cred-badge-name">Amazon OpenSearch Service Delivery</span> 3779 </div> 3780 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-cloudformation-delivery.svg" data-badge-srcset="" data-badge-alt="AWS CloudFormation Service Delivery"> 3781 <img src="/assets/aws-badges/aws-cloudformation-delivery.svg" width="176" height="178" alt="AWS CloudFormation Service Delivery" loading="lazy" decoding="async"> 3782 <span class="cred-badge-name">AWS CloudFormation Delivery</span> 3783 </div> 3784 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-config-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Config Service Delivery"> 3785 <img src="/assets/aws-badges/aws-config-delivery.svg" width="176" height="176" alt="AWS Config Service Delivery" loading="lazy" decoding="async"> 3786 <span class="cred-badge-name">AWS Config Delivery</span> 3787 </div> 3788 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-control-tower-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Control Tower Service Delivery"> 3789 <img src="/assets/aws-badges/aws-control-tower-delivery.svg" width="176" height="176" alt="AWS Control Tower Service Delivery" loading="lazy" decoding="async"> 3790 <span class="cred-badge-name">AWS Control Tower Delivery</span> 3791 </div> 3792 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-graviton-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Graviton Service Delivery"> 3793 <img src="/assets/aws-badges/aws-graviton-delivery.svg" width="176" height="176" alt="AWS Graviton Service Delivery" loading="lazy" decoding="async"> 3794 <span class="cred-badge-name">AWS Graviton Delivery</span> 3795 </div> 3796 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-systems-manager-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Systems Manager Service Delivery"> 3797 <img src="/assets/aws-badges/aws-systems-manager-delivery.svg" width="176" height="176" alt="AWS Systems Manager Service Delivery" loading="lazy" decoding="async"> 3798 <span class="cred-badge-name">AWS Systems Manager Delivery</span> 3799 </div> 3800 <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-waf-delivery.svg" data-badge-srcset="" data-badge-alt="AWS WAF Service Delivery"> 3801 <img src="/assets/aws-badges/aws-waf-delivery.svg" width="176" height="176" alt="AWS WAF Service Delivery" loading="lazy" decoding="async"> 3802 <span class="cred-badge-name">AWS WAF Delivery</span> 3803 </div> 3804 </div> 3805 </div> 3806 </div> 3807 </div> 3808 3809 <!-- Bottom strip --> 3810 <div class="cred-bottom-strip reveal"> 3811 <div class="cred-bottom-item"> 3812 <div class="cred-bottom-icon"> 3813 <img src="/assets/icons/globe.svg" alt="" width="33" height="33" loading="lazy" decoding="async"> 3814 </div> 3815 <div class="cred-bottom-label">First Team Topologies<br>Solution Partner Worldwide</div> 3816 </div> 3817 <div class="cred-bottom-item"> 3818 <div class="cred-bottom-icon"> 3819 <img src="/assets/icons/ai.svg" alt="" width="32" height="32" loading="lazy" decoding="async"> 3820 </div> 3821 <div class="cred-bottom-label">AWS Agentic AI<br>specialization</div> 3822 </div> 3823 <div class="cred-bottom-item"> 3824 <div class="cred-bottom-icon"> 3825 <img src="/assets/icons/document.svg" alt="" width="33" height="33" loading="lazy" decoding="async"> 3826 </div> 3827 <div class="cred-bottom-label">AWS Strategic Collaboration<br>Agreement · 2024</div> 3828 </div> 3829 </div> 3830 3831 </div> 3832</section> 3833 3834<!-- SECTION 9: INSIGHTS --> 3835<section class="insights-section" id="insights" data-copy-section="s8"> 3836 <div class="wrap"> 3837 <div class="insights-head"> 3838 <div>
3839 <span class="eyebrow reveal" data-copy-id="s8.eyebrow">Insights</span> 3840 <h2 class="reveal" data-char-glow="" data-copy-id="s8.h2">From our engineers to yours.</h2> 3841 </div> 3842 <a href="/insights" class="insights-all-link reveal" data-delay="1">View all insights <span class="arr">â</span></a> 3843 </div> 3844 <!-- AKWriter:insights start --> 3845 <div class="blog-grid"> 3846 <a href="../../../projects/insights-2026/build/amazon-q-in-quicksight-for-smarter-business-insights.html" class="card-blog reveal" data-delay="1" data-cat="data"> 3847 <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/amazon-q-quicksight-1.webp" alt="Amazon Q in QuickSight for Delivering Smarter Business Insights" loading="lazy" decoding="async" width="800" height="395" srcset="/assets/armakuni-com/insights/amazon-q-quicksight-1-480w.webp 480w, /assets/armakuni-com/insights/amazon-q-quicksight-1.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Data</span></div> 3848 <div class="blog-content"> 3849 <div class="blog-meta"><span>5 min read · Jan 2026</span></div> 3850 <div class="blog-title">Amazon Q in QuickSight for Delivering Smarter Business Insights</div> 3851 <p class="blog-excerpt">Decision makers globally lose up to 30% of their working time gathering data, preparing reports or waiting on technical teams. That is nearly one and a half days every week spent not deciding but searching.</p> 3852 <span class="blog-read-more">Read More</span> 3853 </div> 3854 </a> 3855 <a href="../../../projects/insights-2026/build/how-agentcore-will-redefine-the-future-of-ai-on-aws.html" class="card-blog reveal" data-delay="2" data-cat="agentic-ai"> 3856 <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/agent-core-bedrock.webp" alt="How Agent Core Will Redefine the Future of AI on AWS" loading="lazy" decoding="async" width="800" height="427" srcset="/assets/armakuni-com/insights/agent-core-bedrock-480w.webp 480w, /assets/armakuni-com/insights/agent-core-bedrock.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Agentic AI</span></div> 3857 <div class="blog-content"> 3858 <div class="blog-meta"><span>5 min read · Jan 2026</span></div> 3859 <div class="blog-title">How Agent Core Will Redefine the Future of AI on AWS</div> 3860 <p class="blog-excerpt">
3860Enterprise AI has moved past experimentation. Bedrock AgentCore turns governed, audited agents into the new default deployment shape on AWS.</p> 3861 <span class="blog-read-more">Read More</span> 3862 </div> 3863 </a> 3864 <a href="../../../projects/insights-2026/build/working-with-amazon-connect-for-modern-voice-ai.html" class="card-blog reveal" data-delay="3" data-cat="connect-customer"> 3865 <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/amazon-connect-blog.webp" alt="Working With Amazon Connect for Modern Voice AI" loading="lazy" decoding="async" width="800" height="499" srcset="/assets/armakuni-com/insights/amazon-connect-blog-480w.webp 480w, /assets/armakuni-com/insights/amazon-connect-blog.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Connect Customer</span></div> 3866 <div class="blog-content"> 3867 <div class="blog-meta"><span>7 min read · Dec 2025</span></div> 3868 <div class="blog-title">Working With Amazon Connect for Modern Voice AI</div> 3869 <p class="blog-excerpt">Learn how Amazon Connect, AgentCore, and Nova 2 Sonic simplify real-time voice AI by reducing state management, SIP complexity, and operational overhead compared to older Twilio and Chime SDK patterns.</p> 3870 <span class="blog-read-more">Read More</span> 3871 </div> 3872 </a> 3873 <a href="../../../projects/insights-2026/build/armakuni-achieves-the-aws-agentic-ai-specialization.html" class="card-blog reveal" data-delay="4" data-cat="news"> 3874 <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization.webp" alt="Armakuni Achieves the AWS Agentic AI Specialization" loading="lazy" decoding="async" width="800" height="450" srcset="/assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization-480w.webp 480w, /assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 56vw"><span class="blog-category">News</span></div> 3875 <div class="blog-content"> 3876 <div class="blog-meta"><span>3 min read · Jan 2026</span></div> 3877 <div class="blog-title">Armakuni Achieves the AWS Agentic AI Specialization</div> 3878 <p class="blog-excerpt">North America, 21 January 2026, Armakuni is proud to share that we have earned the AWS AI Specialization in Agentic AI, a newly introduced specialization within the AWS AI Competency program.</p> 3879 <span class="blog-read-more">Read More</span> 3880 </div> 3881 </a> 3882 </div> 3883 <!-- AKWriter:insights end --> 3884 </div> 3885</section> 3886 3887<!-- SECTION 10: CTA --> 3888<section class="cta-section" id="cta" data-design-system-component="cta-particle" data-philosopher="tompkins" data-copy-section="s9"> 3889 <canvas class="cta-particle-canvas" id="ctaCanvas" aria-hidden="true"></canvas> 3890 <div class="cta-inner"> 3891 <span class="eyebrow reveal" data-copy-id="s9.eyebrow">The engineering partner for the AI era</span> 3892 <h2 class="reveal" data-char-glow="" data-copy-id="s9.h2">Build your unfair advantage.</h2> 3893 <p class="lead reveal" data-delay="1" data-copy-id="s9.lead">We've been turning tomorrow into today since 2012. Book a 30-minute architecture review. Bring your toughest problem. We'll sketch a fix live.</p> 3894 <div class="cta-actions reveal" data-delay="2"> 3895 <a href="/contact" class="btn btn-glow-pulse" data-copy-id="s9.cta_0">Start Building <span class="arr">â</span></a> 3896 </div> 3897 </div> 3898</section> 3899 3900<!-- FOOTER --> 3901<!-- AKWriter:footer start --> 3902<footer class="site-footer"> 3903 <div class="wrap"> 3904 <div class="footer-grid"> 3905 <div class="footer-brand-col"> 3906 <a class="footer-brand" href="/" aria-label="Armakuni home"> 3907 <img class="footer-brand-mark" src="/assets/AK%20White%20Logo.webp" width="320" height="52" alt="Armakuni" decoding="async" loading="lazy"> 3908 </a> 3909 <p class="footer-tagline">AWS Premier Partner. The engineering partner for the AI era. 1,300+ engineers shipping on AWS since 2012.</p> 3910 </div> 3911 <div class="footer-col"> 3912 <div class="footer-col-heading">Services</div> 3913 <ul> 3914 <li><a href="/offerings/modernization-with-ai">Modernization with AI</a></li> 3915 <li><a href="/offerings/gen-ai-and-agentic-ai">AI Transformation</a></li> 3916 <li><a href="/offerings/amazon-connect">Connect Customer</a></li> 3917 <li><a href="/offerings/data-engineering">Data Engineering</a></li> 3918 <li><a href="/offerings/managed-services">Managed Services</a></li> 3919 <li><a href="/offerings/app-dev-pods">Application Development Pods</a></li> 3920 <li><a href="/offerings/migration">Migration</a></li> 3921 </ul> 3922 </div> 3923 <div class="footer-col"> 3924 <div class="footer-col-heading">Industries</div> 3925 <ul> 3926 <li><a href="/industries/financial-services">Financial Services</a></li> 3927 <li><a href="/industries/healthcare">Healthcare</a></li> 3928 <li><a href="/industries/public-sector">Public Sector</a></li> 3929 <li><a href="/industries/manufacturing">Manufacturing</a></li> 3930 <li><a href="/industries/media-entertainment">Media & Entertainment</a></li> 3931 <li><a href="/industries/saas-isv">SaaS & ISV</a></li> 3932 <li><a href="/industries/retail-ecommerce">Retail & E-commerce</a></li> 3933 <li><a href="/industries/private-equity-vc">Private Equity & VC</a></li> 3934 <li><a href="/industries/telecom">Telecom</a></li> 3935 </ul> 3936 </div> 3937 <div class="footer-col"> 3938 <div class="footer-col-heading">Company</div> 3939 <ul> 3940 <li><a href="/about">About</a></li> 3941 <li><a href="/insights">Insights</a></li> 3942 <li><a href="/case-studies">Case Studies</a></li> 3943 <li><a href="/contact">Contact</a></li> 3944 </ul> 3945 </div> 3946 <div class="footer-col footer-col-offices"> 3947 <div class="footer-col-heading">Offices</div> 3948 <ul> 3949 <li class="footer-office"> 3950 <div class="footer-office-city">London</div> 3951 <div class="footer-office-addr">International House<br>64 Nile St, London N1 7SR, United Kingdom</div> 3952 <div class="footer-office-phone">+44 (0)207 459 4330</div> 3953 </li> 3954 <li class="footer-office"> 3955 <div class="footer-office-city">Saint Cloud, FL</div> 3956 <div class="footer-office-addr">2880 Cypress Grove Ct.<br>FL 34772, United States</div> 3957 <div class="footer-office-phone">+1 (321) 335-4237</div> 3958 </li> 3959 <li class="footer-office"> 3960 <div class="footer-office-city">Ahmedabad</div> 3961 <div class="footer-office-addr">Office 601-611 Binori B Sq-2<br>380054, India</div> 3962 <div class="footer-office-phone">+91 2717 442 744</div> 3963 </li> 3964 </ul> 3965 </div> 3966 </div> 3967 <div class="footer-bottom">
3968 <span class="footer-copyright">© 2026 Armakuni Ltd. Registered in England and Wales no. 08104921. All rights reserved.</span> 3969 <nav class="footer-legal-nav" aria-label="Legal"> 3970 <a class="footer-bottom-link" href="/privacy-policy">Privacy Policy</a> 3971 <a class="footer-bottom-link" href="/modern-slavery">Modern Slavery</a> 3972 <a class="footer-bottom-link" href="/carbon-footprint">Carbon Footprint</a> 3973 <a class="footer-bottom-link" href="mailto:[email protected]">[email protected]</a> 3974 </nav> 3975 </div> 3976 </div> 3977</footer> 3978<!-- AKWriter:footer end --> 3979
3980<script> 3981document.addEventListener('DOMContentLoaded', () => { 3982 requestAnimationFrame(() => document.body.classList.add('loaded')); 3983 3984 /* ---- REVEAL (IntersectionObserver + CSS) ---- */ 3985 const revealObs = new IntersectionObserver((entries) => { 3986 entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); } }); 3987 }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }); 3988 document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el)); 3989 3990 /* ---- MOUSE GLOW ---- */ 3991 const glow = document.getElementById('mouseGlow'); 3992 if (glow && window.matchMedia('(hover: hover)').matches) { 3993 document.addEventListener('mousemove', (e) => { glow.style.left = e.clientX + 'px'; glow.style.top = e.clientY + 'px'; }); 3994 } 3995 3996 /* Char glow: canonical version lives in the GSAP block below (pipe-delimited line breaks, word-preserving) */ 3997 3998 /* ---- TRUST STRIP + LOGO MARQUEE: duplicate content for seamless loop ---- */ 3999 ['trustTrack', 'logoTrack'].forEach(id => { 4000 const track = document.getElementById(id); 4001 if (!track) return; 4002 track.innerHTML = track.innerHTML + track.innerHTML; 4003 }); 4004 4005 /* ---- TESTIMONIAL CAROUSEL (canonical from design-system.html) 4006 Track-translate pattern: drives a transform on .tm-track instead of 4007 scrollTo() on the rail. Auto-generates dots from slide count, clamps 4008 idx to [0, maxIdx] so first/last cards always reach the edge cleanly, 4009 and disables prev/next at boundaries. Supports keyboard + swipe. */ 4010 (function initTmCarousel() { 4011 var section = document.querySelector('section.tm-sec'); 4012 if (!section) return; 4013 var track = section.querySelector('#tmTrack') || section.querySelector('.tm-track'); 4014 var viewport = section.querySelector('.tm-viewport'); 4015 var prev = section.querySelector('#tmPrev'); 4016 var next = section.querySelector('#tmNext'); 4017 if (!track || !viewport || !prev || !next) return; 4018 var slides = Array.prototype.filter.call(track.children, function (el) { 4019 return el.classList && el.classList.contains('tm-slide'); 4020 }); 4021 if (!slides.length) return; 4022 4023 var idx = 0; 4024 4025 function step() { 4026 var card = slides[0]; 4027 var gap = parseFloat(getComputedStyle(track).gap) || 24; 4028 return card.getBoundingClientRect().width + gap; 4029 } 4030 function maxIdx() { 4031 var paddingX = 4032 parseFloat(getComputedStyle(viewport).paddingLeft) + 4033 parseFloat(getComputedStyle(viewport).paddingRight); 4034 var visibleW = viewport.clientWidth - paddingX; 4035 var s = step(); 4036 if (s <= 0) return 0; 4037 var visibleCount = Math.max(1, Math.floor((visibleW + 24) / s)); 4038 return Math.max(0, slides.length - visibleCount); 4039 } 4040 function render() { 4041 var s = step(); 4042 track.style.transform = 'translateX(' + (-idx * s) + 'px)'; 4043 slides.forEach(function (sl, i) { sl.classList.toggle('active', i === idx); }); 4044 } 4045 function goTo(n) { 4046 var count = maxIdx() + 1; 4047 idx = ((n % count) + count) % count; 4048 render(); 4049 } 4050 // Mobile fix (discovered 2026-05-22): tapping an arrow button at the 4051 // bottom of the viewport caused the page to scroll DOWN by ~450px, 4052 // leaving the carousel stranded above the visible window. Root cause: 4053 // when the button receives focus on tap, the browser's default 4054 // "scroll the focused control to a comfortable position" kicks in. 4055 // 4056 // Two-layer defence: 4057 // 1. mousedown.preventDefault() prevents the pointer from giving 4058 // focus to the button at all â keyboard tab nav still works. 4059 // 2. After the carousel updates, capture+restore scrollY in a 4060 // deferred rAF in case any layout shift still nudges the page. 4061 function preventClickFocus(btn) { 4062 btn.addEventListener('mousedown', function (e) { e.preventDefault(); }); 4063 btn.addEventListener('touchstart', function () { 4064 // No-op handler so iOS treats the button as interactive without 4065 // moving the viewport. Combined with mousedown.preventDefault on 4066 // the synthesized click, focus stays elsewhere. 4067 }, { passive: true }); 4068 } 4069 function navClick(delta) { 4070 var y = window.scrollY; 4071 goTo(idx + delta); 4072 requestAnimationFrame(function () { 4073 if (Math.abs(window.scrollY - y) > 1) window.scrollTo(0, y); 4074 }); 4075 } 4076 [prev, next].forEach(preventClickFocus); 4077 prev.addEventListener('click', function () { navClick(-1); }); 4078 next.addEventListener('click', function () { navClick(1); }); 4079 4080 // Keyboard nav (when section receives focus) 4081 section.tabIndex = -1; 4082 section.addEventListener('keydown', function (e) { 4083 if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(idx - 1); } 4084 if (e.key === 'ArrowRight') { e.preventDefault(); goTo(idx + 1); } 4085 }); 4086 4087 // Touch swipe â live drag feedback + threshold commit 4088 var startX = 0, startY = 0, dx = 0, dragging = false, locked = false;
4089 track.addEventListener('touchstart', function (e) { 4090 startX = e.touches[0].clientX; 4091 startY = e.touches[0].clientY; 4092 dx = 0; dragging = true; locked = false; 4093 track.style.transition = 'none'; 4094 }, { passive: true }); 4095 track.addEventListener('touchmove', function (e) { 4096 if (!dragging) return; 4097 var x = e.touches[0].clientX; 4098 var y = e.touches[0].clientY; 4099 dx = x - startX; 4100 var dy = y - startY; 4101 if (!locked) { 4102 if (Math.abs(dy) > Math.abs(dx) + 6) { dragging = false; track.style.transition = ''; render(); return; } 4103 if (Math.abs(dx) > 4) locked = true; 4104 } 4105 if (locked) { 4106 var s = step(); 4107 track.style.transform = 'translateX(' + (-idx * s + dx) + 'px)'; 4108 } 4109 }, { passive: true }); 4110 function commitSwipe() { 4111 if (!dragging) return; 4112 dragging = false; 4113 track.style.transition = ''; 4114 var threshold = Math.min(80, step() * 0.25); 4115 if (Math.abs(dx) > threshold) goTo(idx + (dx < 0 ? 1 : -1)); 4116 else render(); 4117 } 4118 track.addEventListener('touchend', commitSwipe); 4119 track.addEventListener('touchcancel', commitSwipe); 4120 4121 // Re-render on resize (debounced via rAF) 4122 var resizeRaf = 0; 4123 window.addEventListener('resize', function () { 4124 if (resizeRaf) cancelAnimationFrame(resizeRaf); 4125 resizeRaf = requestAnimationFrame(render); 4126 }, { passive: true }); 4127 4128 render(); 4129 })(); 4130 4131 /* icon-tile-row tiles rely on plain hover/transition; no JS-driven parallax needed */ 4132 4133 /* ---- INDUSTRY CAROUSEL arrow nav + edge auto-scroll ---- 4134 When the cursor enters the leftmost or rightmost EDGE_PX zone of the rail, 4135 start a smooth continuous scroll in that direction. Speed scales with how 4136 deep the cursor sits in the edge zone. Touch devices (`hover: none`) skip 4137 this entirely so swipe still works naturally. */ 4138 const indScroll = document.getElementById('industriesScroll'); 4139 const indPrev = document.getElementById('indPrev'); 4140 const indNext = document.getElementById('indNext'); 4141 if (indScroll && indPrev && indNext) { 4142 function indStep() { 4143 const c = indScroll.querySelector('.ind-card'); 4144 return c ? c.offsetWidth + 16 : 300; 4145 } 4146 function indMaxScroll() { return indScroll.scrollWidth - indScroll.clientWidth; } 4147 function updateIndArrows() { 4148 const max = indMaxScroll(); 4149 indPrev.disabled = indScroll.scrollLeft <= 2; 4150 indNext.disabled = indScroll.scrollLeft >= max - 2; 4151 } 4152 indPrev.addEventListener('click', () => indScroll.scrollBy({ left: -indStep() * 2, behavior: 'smooth' })); 4153 indNext.addEventListener('click', () => indScroll.scrollBy({ left: indStep() * 2, behavior: 'smooth' })); 4154 indScroll.addEventListener('scroll', updateIndArrows, { passive: true }); 4155 window.addEventListener('resize', updateIndArrows); 4156 updateIndArrows(); 4157 4158 // Edge-driven auto-scroll on hover-capable devices. 4159 // Toggles `.edge-scrolling` class to suspend scroll-snap so the per-frame 4160 // scrollLeft assignment isn't rubber-banded back to a snap point. 4161 const supportsHover = window.matchMedia('(hover: hover)').matches; 4162 if (supportsHover) { 4163 const EDGE_PX = 140; 4164 const MAX_PX_PER_FRAME = 18; 4165 let edgeRaf = 0; 4166 let edgeVelocity = 0; 4167 function setEdgeActive(active) { 4168 indScroll.classList.toggle('edge-scrolling', active); 4169 } 4170 function tickEdgeScroll() { 4171 if (edgeVelocity === 0) { edgeRaf = 0; setEdgeActive(false); return; } 4172 const max = indMaxScroll(); 4173 const next = Math.max(0, Math.min(max, indScroll.scrollLeft + edgeVelocity)); 4174 if (next === indScroll.scrollLeft) { 4175 edgeVelocity = 0; edgeRaf = 0; setEdgeActive(false); return; 4176 } 4177 indScroll.scrollLeft = next; 4178 edgeRaf = requestAnimationFrame(tickEdgeScroll); 4179 } 4180 indScroll.addEventListener('mousemove', (e) => { 4181 const rect = indScroll.getBoundingClientRect(); 4182 const x = e.clientX - rect.left; 4183 const w = rect.width; 4184 let v = 0; 4185 if (x < EDGE_PX) { 4186 const depth = (EDGE_PX - x) / EDGE_PX; 4187 v = -Math.round(MAX_PX_PER_FRAME * depth); 4188 } else if (x > w - EDGE_PX) { 4189 const depth = (x - (w - EDGE_PX)) / EDGE_PX; 4190 v = Math.round(MAX_PX_PER_FRAME * depth); 4191 } 4192 edgeVelocity = v; 4193 if (v !== 0) { 4194 setEdgeActive(true); 4195 if (!edgeRaf) edgeRaf = requestAnimationFrame(tickEdgeScroll); 4196 } else if (edgeRaf === 0) { 4197 setEdgeActive(false); 4198 } 4199 }); 4200 indScroll.addEventListener('mouseleave', () => { 4201 edgeVelocity = 0; 4202 setEdgeActive(false); 4203 }); 4204 } 4205 } 4206 4207 /* ---- HORIZONTAL TIMELINE: era dots activate on intersection ---- */ 4208 const eras = document.querySelectorAll('.t-era'); 4209 const tlFill = document.getElementById('tlLineFill'); 4210 if (eras.length && tlFill) { 4211 let activated = 0; 4212 const eraObs = new IntersectionObserver((entries) => {
4213 entries.forEach(e => { 4214 if (!e.isIntersecting) return; 4215 e.target.classList.add('active'); 4216 activated = Math.max(activated, parseInt(e.target.dataset.era) + 1); 4217 const pct = Math.min(100, (activated / eras.length) * 100); 4218 tlFill.style.width = pct + '%'; 4219 }); 4220 }, { threshold: 0.5 }); 4221 eras.forEach(e => eraObs.observe(e)); 4222 } 4223 4224 /* CTA canvas particle animation lives in the canonical GSAP block below */ 4225}); 4226 4227/* ---- GSAP: canonical character glow + scroll progress + section triggers + CTA particles ---- */ 4228window.addEventListener('load', () => { 4229 if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return; 4230 gsap.registerPlugin(ScrollTrigger); 4231 4232 /* Scroll progress bar */ 4233 gsap.to('#scrollProgress', { 4234 width: '100%', ease: 'none', 4235 scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: true } 4236 }); 4237 4238 /* Character glow animation - canonical implementation from design-system.html. 4239 Pipe-delimited line breaks. Word-preserving splits. GSAP stagger + onComplete settle. */ 4240 document.querySelectorAll('[data-char-glow]').forEach((el) => { 4241 if (el.dataset.gsapInit) return; 4242 el.dataset.gsapInit = '1'; 4243 const lines = el.innerHTML.replace(/<br\s*\/?>/gi,'|').replace(/<[^>]+>/g,'').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"').replace(/�*39;/g,"'").replace(/ /g,'\u00a0').replace(/&/g,'&').trim().split('|'); 4244 el.innerHTML = ''; 4245 lines.forEach((line, li) => { 4246 if (li > 0) el.appendChild(document.createElement('br')); 4247 const words = line.trim().split(/\s+/); 4248 words.forEach((word, wi) => { 4249 for (let ci = 0; ci < word.length; ci++) { 4250 const span = document.createElement('span'); 4251 span.className = 'char'; 4252 span.textContent = word[ci]; 4253 el.appendChild(span); 4254 } 4255 if (wi < words.length - 1) el.appendChild(document.createTextNode(' ')); 4256 }); 4257 }); 4258 const chars = el.querySelectorAll('.char'); 4259 gsap.set(chars, { opacity: 0.2, color: 'var(--accent-bright)' }); 4260 ScrollTrigger.create({ 4261 trigger: el, 4262 start: 'top 95%', 4263 once: true, 4264 onEnter() { 4265 const bright = (getComputedStyle(document.body).getPropertyValue('--accent-bright').trim() || '#7bc6ff'); 4266 gsap.to(chars, { 4267 opacity: 1, color: 'var(--text)', 4268 textShadow: '0 0 12px ' + bright + '80', 4269 duration: 0.4, stagger: 0.02, ease: 'power2.out', 4270 onComplete() { 4271 gsap.to(chars, { textShadow: '0 0 0px transparent', duration: 0.6, stagger: 0.015, ease: 'power1.out' }); 4272 } 4273 }); 4274 } 4275 }); 4276 }); 4277 4278 /* Process steps - activate each as it scrolls into view (canonical pattern) */ 4279 document.querySelectorAll('.process-step').forEach((step, i) => { 4280 ScrollTrigger.create({ 4281 trigger: step, start: 'top 80%', end: 'bottom 20%', 4282 onEnter: () => step.classList.add('active'), 4283 onEnterBack: () => step.classList.add('active'), 4284 }); 4285 }); 4286 4287 /* Nav subtle darken on scroll (canonical) */ 4288 const nav = document.querySelector('.nav'); 4289 window.addEventListener('scroll', () => { 4290 if (nav) nav.style.background = window.scrollY > 100 ? 'rgba(8,12,20,0.88)' : 'rgba(8,12,20,0.68)'; 4291 }, { passive: true }); 4292 4293 /* CTA Particle Canvas - canonical edge-converge implementation from design-system.html */ 4294 const ctaCanvas = document.getElementById('ctaCanvas'); 4295 if (ctaCanvas && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) { 4296 const ctx = ctaCanvas.getContext('2d'); 4297 const particles = []; 4298 const PARTICLE_COUNT = 600; 4299 function resizeCtaCanvas() { 4300 const r = ctaCanvas.parentElement.getBoundingClientRect(); 4301 ctaCanvas.width = r.width; ctaCanvas.height = r.height; 4302 } 4303 resizeCtaCanvas(); 4304 window.addEventListener('resize', resizeCtaCanvas); 4305 for (let pi = 0; pi < PARTICLE_COUNT; pi++) { 4306 const edge = Math.random() * 4 | 0; 4307 let px, py; 4308 if (edge === 0) { px = Math.random(); py = 0; } 4309 else if (edge === 1) { px = 1; py = Math.random(); } 4310 else if (edge === 2) { px = Math.random(); py = 1; } 4311 else { px = 0; py = Math.random(); } 4312 particles.push({ 4313 x: px, y: py,
4314 tx: 0.4 + Math.random() * 0.2, ty: 0.4 + Math.random() * 0.2, 4315 speed: 0.0003 + Math.random() * 0.0008, 4316 size: 0.5 + Math.random() * 1.5, 4317 opacity: 0.05 + Math.random() * 0.2 4318 }); 4319 } 4320 function drawCta() { 4321 ctx.clearRect(0, 0, ctaCanvas.width, ctaCanvas.height); 4322 const accentHex = (getComputedStyle(document.body).getPropertyValue('--accent').trim() || '#2d62ff'); 4323 const r = parseInt(accentHex.slice(1,3),16), g = parseInt(accentHex.slice(3,5),16), b = parseInt(accentHex.slice(5,7),16); 4324 for (let i = 0; i < particles.length; i++) { 4325 const p = particles[i]; 4326 p.x += (p.tx - p.x) * p.speed; 4327 p.y += (p.ty - p.y) * p.speed; 4328 const dist = Math.hypot(p.x - p.tx, p.y - p.ty); 4329 if (dist < 0.01) { 4330 const edge = Math.random() * 4 | 0; 4331 if (edge === 0) { p.x = Math.random(); p.y = 0; } 4332 else if (edge === 1) { p.x = 1; p.y = Math.random(); } 4333 else if (edge === 2) { p.x = Math.random(); p.y = 1; } 4334 else { p.x = 0; p.y = Math.random(); } 4335 } 4336 ctx.beginPath(); 4337 ctx.arc(p.x * ctaCanvas.width, p.y * ctaCanvas.height, p.size, 0, Math.PI * 2); 4338 ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + p.opacity + ')'; 4339 ctx.fill(); 4340 } 4341 requestAnimationFrame(drawCta); 4342 } 4343 /* cta-particles-fix-2026-05-17 */ 4344 (function(){ 4345 var fired = false; 4346 function fire(){ if (fired) return; fired = true; drawCta(); } 4347 if ('IntersectionObserver' in window) { 4348 var io = new IntersectionObserver(function(entries){ 4349 entries.forEach(function(e){ if (e.isIntersecting) fire(); }); 4350 }, { threshold: 0.05 }); 4351 io.observe(ctaCanvas.parentElement); 4352 } else { 4353 fire(); 4354 } 4355 if (typeof ScrollTrigger !== 'undefined') { 4356 ScrollTrigger.create({ 4357 trigger: ctaCanvas.parentElement, 4358 start: 'top bottom', end: 'bottom top', 4359 onEnter: fire, onEnterBack: fire 4360 }); 4361 } 4362 })(); 4363 } 4364 4365}); 4366 4367 4368 4369/* ---- HERO BG: custom mouse-reactive GLSL shader (modal.com-style gradient mesh). 4370 Domain-warped FBM noise. Mouse position warps the field + adds a soft glow 4371 at the cursor. Blue-only palette. Runs at ~0.1ms/frame on M-class GPUs. ---- */ 4372window.addEventListener('load', () => { 4373 const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches; 4374 const canvas = document.getElementById('heroFluidInk'); 4375 if (!canvas) return; 4376 const gl = canvas.getContext('webgl', { antialias: false, premultipliedAlpha: false }) 4377 || canvas.getContext('experimental-webgl'); 4378 if (!gl) return; 4379 4380 // Pause the rAF draw loop when the hero scrolls out of view. Saves 4381 // ~0.1ms per frame * 60fps continuously while the user is reading 4382 // anything below the fold. Local override of requestAnimationFrame 4383 // inside this IIFE only â does not touch window.requestAnimationFrame 4384 // so other site animations (GSAP, ScrollTrigger) are unaffected. 4385 let __heroVisible = true; 4386 const __hero = canvas.closest('.hero') || canvas.parentElement; 4387 if (__hero && typeof IntersectionObserver === 'function') { 4388 new IntersectionObserver((entries) => { 4389 __heroVisible = entries[0].isIntersecting; 4390 }, { threshold: 0 }).observe(__hero); 4391 } 4392 const __raf = window.requestAnimationFrame.bind(window); 4393 function requestAnimationFrame(cb) { 4394 return __raf(function (t) { 4395 if (!__heroVisible) { requestAnimationFrame(cb); return; } 4396 cb(t); 4397 }); 4398 } 4399 4400 const DPR = Math.min(window.devicePixelRatio || 1, 1.5); 4401 const host = canvas.parentElement; 4402 4403 const vertSrc = 'attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos, 0.0, 1.0); }'; 4404 const fragSrc = ` 4405 precision highp float; 4406 uniform vec2 u_res; 4407 uniform float u_time; 4408 uniform vec2 u_mouse; /* normalized 0..1, y flipped to GL */ 4409 uniform float u_mActive; 4410 4411 float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); } 4412 float noise(vec2 p){ 4413 vec2 i = floor(p), f = fract(p); 4414 vec2 u = f*f*(3.0-2.0*f); 4415 return mix( 4416 mix(hash(i), hash(i+vec2(1.0,0.0)), u.x), 4417 mix(hash(i+vec2(0.0,1.0)), hash(i+vec2(1.0,1.0)), u.x), 4418 u.y); 4419 } 4420 float fbm(vec2 p){ 4421 float v = 0.0, a = 0.5; 4422 for (int i = 0; i < 5; i++){ v += a * noise(p); p *= 2.05; a *= 0.5; } 4423 return v; 4424 } 4425 4426 void main(){ 4427 vec2 uv = gl_FragCoord.xy / u_res.xy; 4428 vec2 p = uv; 4429 p.x *= u_res.x / u_res.y; 4430 4431 float t = u_time * 0.06; 4432 4433 /* Mouse-biased domain warp. The warp vectors are offset by the cursor, 4434 so moving the mouse shifts the visible mesh. */ 4435 vec2 md = uv - u_mouse;
4436 vec2 warp1 = vec2( 4437 fbm(p + vec2(t, 0.0) + md * 1.2), 4438 fbm(p + vec2(0.0, t) + md * 1.2) 4439 ); 4440 vec2 warp2 = vec2( 4441 fbm(p + warp1 * 1.6 + vec2(t * 0.7, 0.0)), 4442 fbm(p + warp1 * 1.6 + vec2(0.0, t * 0.9)) 4443 ); 4444 float d = fbm(p + warp2 * 2.2); 4445 4446 /* Soft glow at cursor. Active only when the mouse has moved inside. 4447 Tuned dim: tighter falloff (5.5), lower intensity (0.22). */ 4448 float mDist = length(md * vec2(u_res.x / u_res.y, 1.0)); 4449 float mouseGlow = exp(-mDist * 5.5) * 0.22 * u_mActive; 4450 d += mouseGlow; 4451 4452 /* Brand palette - deep navy â mid blue â bright cyan */ 4453 vec3 cDark = vec3(0.015, 0.030, 0.075); 4454 vec3 cMid = vec3(0.115, 0.260, 0.700); 4455 vec3 cHi = vec3(0.480, 0.780, 1.000); 4456 4457 vec3 col = mix(cDark, cMid, smoothstep(0.30, 0.72, d)); 4458 col = mix(col, cHi, smoothstep(0.72, 0.96, d) * 0.70); 4459 4460 /* Left-edge attenuation so the headline area stays dark for text readability. */ 4461 float leftFade = smoothstep(0.00, 0.42, uv.x); 4462 col *= 0.25 + leftFade * 0.75; 4463 4464 /* Slight bottom vignette to help content card settle */ 4465 col *= smoothstep(0.0, 0.18, uv.y); 4466 4467 gl_FragColor = vec4(col, 1.0); 4468 } 4469 `; 4470 4471 function compile(type, src) { 4472 const s = gl.createShader(type); 4473 gl.shaderSource(s, src); 4474 gl.compileShader(s); 4475 if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { 4476 console.error('shader compile', gl.getShaderInfoLog(s)); 4477 return null; 4478 } 4479 return s; 4480 } 4481 const vs = compile(gl.VERTEX_SHADER, vertSrc); 4482 const fs = compile(gl.FRAGMENT_SHADER, fragSrc); 4483 if (!vs || !fs) return; 4484 const prog = gl.createProgram(); 4485 gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog); 4486 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { 4487 console.error('program link', gl.getProgramInfoLog(prog)); 4488 return; 4489 } 4490 gl.useProgram(prog); 4491 4492 const buf = gl.createBuffer(); 4493 gl.bindBuffer(gl.ARRAY_BUFFER, buf); 4494 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1, 1, -1, 1, 1,-1, 1, 1]), gl.STATIC_DRAW); 4495 const aPos = gl.getAttribLocation(prog, 'a_pos'); 4496 gl.enableVertexAttribArray(aPos); 4497 gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0); 4498 4499 const uRes = gl.getUniformLocation(prog, 'u_res'); 4500 const uTime = gl.getUniformLocation(prog, 'u_time'); 4501 const uMouse = gl.getUniformLocation(prog, 'u_mouse'); 4502 const uMActive = gl.getUniformLocation(prog, 'u_mActive'); 4503 4504 function resize() { 4505 const r = host.getBoundingClientRect(); 4506 canvas.width = Math.max(320, Math.floor(r.width * DPR)); 4507 canvas.height = Math.max(240, Math.floor(r.height * DPR)); 4508 canvas.style.width = r.width + 'px'; 4509 canvas.style.height = r.height + 'px'; 4510 gl.viewport(0, 0, canvas.width, canvas.height); 4511 } 4512 resize(); 4513 new ResizeObserver(resize).observe(host); 4514 4515 /* Mouse tracking. Listen on document so events fire even over UI layers. 4516 Translate to hero-local normalized coords. */ 4517 let tmx = 0.7, tmy = 0.45, mx = 0.7, my = 0.45, mA = 0.0; 4518 const onMove = (e) => { 4519 const r = host.getBoundingClientRect(); 4520 tmx = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)); 4521 tmy = Math.max(0, Math.min(1, 1.0 - (e.clientY - r.top) / r.height)); /* flip to GL */ 4522 mA = 1.0; 4523 }; 4524 document.addEventListener('mousemove', onMove, { passive: true }); 4525 document.addEventListener('touchmove', (e) => { if (e.touches[0]) onMove(e.touches[0]); }, { passive: true }); 4526 4527 const start = performance.now(); 4528 function draw() { 4529 const t = (performance.now() - start) * 0.001; 4530 mx += (tmx - mx) * 0.06; 4531 my += (tmy - my) * 0.06; 4532 gl.uniform2f(uRes, canvas.width, canvas.height); 4533 gl.uniform1f(uTime, REDUCED ? 0 : t); 4534 gl.uniform2f(uMouse, mx, my); 4535 gl.uniform1f(uMActive, mA); 4536 gl.drawArrays(gl.TRIANGLES, 0, 6); 4537 if (!REDUCED) requestAnimationFrame(draw); 4538 } 4539 draw(); 4540}); 4541 4542</script>
4542 4543<!-- AKWriter:nav-toggle-js -->
4544<script> 4545(function(){ 4546 var toggle=document.querySelector('.nav-mobile-toggle'); 4547 if(toggle){ 4548 toggle.addEventListener('click',function(){ 4549 var nav=toggle.closest('nav'); 4550 var open=nav.getAttribute('data-open')==='true'; 4551 nav.setAttribute('data-open',open?'false':'true'); 4552 toggle.setAttribute('aria-expanded',open?'false':'true'); 4553 }); 4554 } 4555 document.querySelectorAll('.nav-dd-trigger').forEach(function(btn){ 4556 btn.addEventListener('click',function(e){ 4557 if(window.matchMedia('(max-width: 880px)').matches){ 4558 e.preventDefault(); 4559 var dd=btn.closest('.nav-dd'); 4560 var open=dd.getAttribute('data-open')==='true'; 4561 dd.setAttribute('data-open',open?'false':'true'); 4562 btn.setAttribute('aria-expanded',open?'false':'true'); 4563 } 4564 }); 4565 }); 4566 4567 /* Remember which top-nav menu (Services / Solutions / Industries) a link was 4568 clicked from, so the destination page highlights THAT menu as active even 4569 when the destination's own page-type classification would otherwise pick 4570 a different one (e.g. a Solutions card whose only link is the parent 4571 offering page, which is also reachable from Services). Session-scoped: 4572 read once on load then cleared, so it only affects the page you actually 4573 navigated to and doesn't leak into later unrelated navigation. */ 4574 try { 4575 document.querySelectorAll('.nav-dd[data-nav-key] .nav-dd-panel a[href]').forEach(function(link){ 4576 link.addEventListener('click', function(){ 4577 var key = link.closest('.nav-dd[data-nav-key]').getAttribute('data-nav-key'); 4578 try { sessionStorage.setItem('akNavSource', key); } catch(e) {} 4579 }); 4580 }); 4581 var sourceKey = sessionStorage.getItem('akNavSource'); 4582 if (sourceKey) { 4583 sessionStorage.removeItem('akNavSource'); 4584 var target = document.querySelector('.nav-dd[data-nav-key="' + sourceKey + '"]'); 4585 if (target && !target.classList.contains('is-active')) { 4586 document.querySelectorAll('.nav-dd.is-active').forEach(function(dd){ dd.classList.remove('is-active'); }); 4587 target.classList.add('is-active'); 4588 } 4589 } 4590 } catch(e) {} 4591})(); 4592</script>
4592 4593 4594
4595<script> 4596// Credentials â synced badge display + tab switcher 4597(function() { 4598 var displayImg = document.querySelector('.cred-badge-display-img'); 4599 if (!displayImg) return; 4600 4601 function setActive(item) { 4602 if (!item) return; 4603 document.querySelectorAll('.cred-badge-item').forEach(function(el) { el.classList.remove('cred-badge-item--active'); }); 4604 item.classList.add('cred-badge-item--active'); 4605 displayImg.style.opacity = '0'; 4606 displayImg.style.transform = 'scale(0.92)'; 4607 setTimeout(function() { 4608 displayImg.src = item.getAttribute('data-badge-src') || ''; 4609 displayImg.alt = item.getAttribute('data-badge-alt') || ''; 4610 displayImg.style.opacity = '1'; 4611 displayImg.style.transform = 'scale(1)'; 4612 }, 120); 4613 } 4614 4615 // Init: show first badge of active tab 4616 var activePane = document.querySelector('.cred-tab-pane.active'); 4617 if (activePane) setActive(activePane.querySelector('.cred-badge-item')); 4618 4619 // Hover â show that badge 4620 document.querySelectorAll('.cred-badge-item').forEach(function(item) { 4621 item.addEventListener('mouseenter', function() { setActive(this); }); 4622 }); 4623 4624 // Scroll â show first item entering the viewport of the list 4625 document.querySelectorAll('.cred-badge-list').forEach(function(list) { 4626 list.addEventListener('scroll', function() { 4627 var items = list.querySelectorAll('.cred-badge-item'); 4628 var listRect = list.getBoundingClientRect(); 4629 for (var i = 0; i < items.length; i++) { 4630 var r = items[i].getBoundingClientRect(); 4631 if (r.bottom > listRect.top + 8) { setActive(items[i]); break; } 4632 } 4633 }, { passive: true }); 4634 }); 4635 4636 // Tab switch â show first badge of new tab 4637 document.querySelectorAll('.cred-tab').forEach(function(tab) { 4638 tab.addEventListener('click', function() { 4639 var target = this.getAttribute('data-tab'); 4640 document.querySelectorAll('.cred-tab').forEach(function(t) { t.classList.remove('active'); }); 4641 document.querySelectorAll('.cred-tab-pane').forEach(function(p) { p.classList.remove('active'); }); 4642 this.classList.add('active'); 4643 var pane = document.getElementById('cred-pane-' + target); 4644 if (pane) { 4645 pane.classList.add('active'); 4646 var list = pane.querySelector('.cred-badge-list'); 4647 if (list) list.scrollTop = 0; 4648 setActive(pane.querySelector('.cred-badge-item')); 4649 } 4650 }); 4651 }); 4652})(); 4653</script>
4653 4654<!-- AKWriter:consent start --> 4655<div id="ak-consent" role="dialog" aria-labelledby="ak-consent-t" aria-describedby="ak-consent-d"> 4656 <div class="ak-consent-in"> 4657 <div class="ak-consent-copy"> 4658 <strong id="ak-consent-t">Cookies on armakuni.com</strong> 4659 <span id="ak-consent-d">We use essential cookies to run the site. With your permission we also use analytics cookies to understand which pages are useful, and advertising cookies to measure our LinkedIn campaigns. See our <a href="/cookie-policy">cookie policy</a> and <a href="/privacy-policy">privacy policy</a>.</span> 4660 </div> 4661 <div class="ak-consent-actions"> 4662 <button type="button" class="ak-consent-btn" data-link data-ak-consent="settings" aria-expanded="false" aria-controls="ak-consent-detail">Settings</button> 4663 <button type="button" class="ak-consent-btn" data-ak-consent="reject">Reject all</button> 4664 <button type="button" class="ak-consent-btn" data-primary data-ak-consent="accept">Accept all</button> 4665 </div> 4666 <div class="ak-consent-detail" id="ak-consent-detail"> 4667 <div class="ak-consent-row"> 4668 <input type="checkbox" id="ak-c-ess" checked disabled> 4669 <div><b>Essential</b><span>Required for the site to work. Always on, no consent needed.</span></div> 4670 </div> 4671 <div class="ak-consent-row"> 4672 <input type="checkbox" id="ak-c-analytics"> 4673 <div><b>Analytics</b><span>Google Analytics 4 (_ga, _ga_<id>). Which pages get read, and how people arrive.</span></div> 4674 </div> 4675 <div class="ak-consent-row"> 4676 <input type="checkbox" id="ak-c-ads"> 4677 <div><b>Advertising</b><span>LinkedIn Insight Tag (bcookie, li_sugr, UserMatchHistory). Measures LinkedIn campaigns.</span></div> 4678 </div> 4679 <div class="ak-consent-actions" style="margin-top:10px"> 4680 <button type="button" class="ak-consent-btn" data-primary data-ak-consent="save">Save choices</button> 4681 </div> 4682 </div> 4683 </div> 4684</div> 4685<style> 4686#ak-consent{position:fixed;left:0;right:0;bottom:0;z-index:1300;display:none;padding:16px 20px;background:rgba(5,5,12,0.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border-hover,rgba(255,255,255,0.14));font-family:var(--font-body,'Inter',sans-serif);color:var(--text,#ebf1fb)} 4687#ak-consent[data-open="1"]{display:block} 4688.ak-consent-in{max-width:1180px;margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap} 4689.ak-consent-copy{flex:1 1 420px;min-width:280px;font-size:13px;line-height:1.55;color:var(--text-secondary,rgba(235,241,251,0.72))} 4690.ak-consent-copy strong{display:block;font-weight:500;color:var(--text,#ebf1fb);margin-bottom:3px} 4691.ak-consent-copy a{color:var(--color-bright,#7bc6ff);text-decoration:underline;text-underline-offset:2px} 4692.ak-consent-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} 4693.ak-consent-btn{font:inherit;font-size:13px;line-height:1;cursor:pointer;padding:11px 18px;border-radius:var(--radius-sm,10px);border:1px solid var(--border-hover,rgba(255,255,255,0.14));background:transparent;color:var(--text,#ebf1fb);transition:border-color .2s,background-color .2s} 4694.ak-consent-btn:hover{border-color:var(--color-cyan,#009be5);background:rgba(255,255,255,0.04)} 4695.ak-consent-btn:focus-visible{outline:2px solid var(--color-bright,#7bc6ff);outline-offset:2px} 4696.ak-consent-btn[data-primary]{background:var(--color-cyan,#009be5);border-color:var(--color-cyan,#009be5);color:#05050c;font-weight:500} 4697.ak-consent-btn[data-primary]:hover{background:var(--color-bright,#7bc6ff);border-color:var(--color-bright,#7bc6ff)} 4698.ak-consent-btn[data-link]{border-color:transparent;padding:11px 10px;color:var(--text-muted,rgba(235,241,251,0.55));text-decoration:underline;text-underline-offset:2px} 4699.ak-consent-btn[data-link]:hover{background:transparent;color:var(--text,#ebf1fb);border-color:transparent} 4700.ak-consent-detail{display:none;flex:1 1 100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--border,rgba(255,255,255,0.04))} 4701.ak-consent-detail[data-open="1"]{display:block} 4702.ak-consent-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:13px;line-height:1.5} 4703.ak-consent-row input{margin-top:3px;width:15px;height:15px;flex:0 0 auto;accent-color:var(--color-cyan,#009be5)} 4704.ak-consent-row b{display:block;font-weight:500;color:var(--text,#ebf1fb)} 4705.ak-consent-row span{color:var(--text-muted,rgba(235,241,251,0.55));font-size:12px} 4706/* 44px min touch target on mobile â WCAG 2.5.8 only asks for 24px, but Ap
4706ple 4707 HIG and Material both specify 44/48, and at 11px padding these came out 37px. */ 4708@media (max-width:640px){#ak-consent{padding:14px 16px}.ak-consent-actions{width:100%}.ak-consent-btn{flex:1 1 auto;text-align:center;min-height:44px}} 4709@media (prefers-reduced-motion:reduce){.ak-consent-btn{transition:none}} 4710</style>
4711<script> 4712(function(){ 4713 var KEY='ak_consent_v1',VER='v1'; 4714 var el=document.getElementById('ak-consent'); 4715 if(!el)return; 4716 var detail=document.getElementById('ak-consent-detail'); 4717 var cbA=document.getElementById('ak-c-analytics'),cbD=document.getElementById('ak-c-ads'); 4718 /* The banner is position:fixed and reserves no layout space. At <=640px its 4719 action buttons stack full-width and it grows from 117px to 217px tall, deep 4720 enough to sit over a page's bottom-most CTA and swallow the tap (measured: 4721 banner y627-844 vs RSVP button y724-772 at 390px wide). Reserve its height 4722 as page padding while it is open, and match scroll-padding so anchor jumps 4723 like #rsvp do not land underneath it. 4724 4725 Applied as inline style rather than a stylesheet rule on purpose. A global 4726 body padding-bottom rule shipped to every page would sit after all four 4727 stylesheet links and silently win the cascade against any future body 4728 padding rule in base.css. Clearing to an empty string removes the 4729 declaration outright, so a closed banner leaves no footprint at all. 4730 4731 Height changes with viewport width and when the Settings panel expands, so 4732 re-measure on every state change and on resize/orientationchange rather 4733 than hardcoding a value. */ 4734 function syncHeight(){ 4735 var h=el.getAttribute('data-open')==='1'?el.offsetHeight+'px':''; 4736 document.body.style.paddingBottom=h; 4737 document.documentElement.style.scrollPaddingBottom=h; 4738 } 4739 function save(analytics,ads){ 4740 /* Only a version stamp, two booleans and a timestamp. Nothing identifying 4741 is ever stored here or pushed to the dataLayer. */ 4742 try{localStorage.setItem(KEY,JSON.stringify({v:VER,analytics:!!analytics,ads:!!ads,ts:Date.now()}));}catch(e){console.warn('[Consent] Failed to persist choice; it will not survive a reload.');} 4743 if(typeof gtag==='function'){ 4744 gtag('consent','update',{ 4745 analytics_storage:analytics?'granted':'denied', 4746 ad_storage:ads?'granted':'denied', 4747 ad_user_data:ads?'granted':'denied', 4748 ad_personalization:ads?'granted':'denied' 4749 }); 4750 } 4751 (window.dataLayer=window.dataLayer||[]).push({event:'ak_consent_update',consent_analytics:!!analytics,consent_ads:!!ads}); 4752 if(analytics&&typeof window.__akClarityLoad==='function')window.__akClarityLoad(); 4753 el.removeAttribute('data-open'); 4754 syncHeight(); 4755 } 4756 el.addEventListener('click',function(e){ 4757 var btn=e.target.closest('[data-ak-consent]'); 4758 if(!btn)return; 4759 var a=btn.getAttribute('data-ak-consent'); 4760 if(a==='accept')save(true,true); 4761 else if(a==='reject')save(false,false); 4762 else if(a==='save')save(cbA.checked,cbD.checked); 4763 else if(a==='settings'){ 4764 var open=detail.getAttribute('data-open')==='1'; 4765 if(open)detail.removeAttribute('data-open');else detail.setAttribute('data-open','1'); 4766 btn.setAttribute('aria-expanded',open?'false':'true'); 4767 syncHeight(); 4768 } 4769 }); 4770 var stored=null; 4771 try{stored=JSON.parse(localStorage.getItem(KEY)||'null');}catch(e){} 4772 if(!stored||stored.v!==VER)el.setAttribute('data-open','1'); 4773 /* Measure once now, then again after layout settles. A first-paint reading 4774 is taken before webfonts swap in and under-reports the height by ~20px, 4775 which would leave the page short of the space it needs to reserve. */ 4776 syncHeight(); 4777 requestAnimationFrame(syncHeight); 4778 window.addEventListener('load',syncHeight); 4779 if(document.fonts&&document.fonts.ready)document.fonts.ready.then(syncHeight).cat
4779ch(function(){}); 4780 window.addEventListener('resize',syncHeight); 4781 window.addEventListener('orientationchange',syncHeight); 4782})(); 4783</script>
4783 4784<!-- AKWriter:consent end --> 4785</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.