:root{--paper:#060814;--cyan:#a7c8ff;--green:#adcdff}
body{background:#060814}.site-header{background:#060814f2;border-color:#6276ae33}.brand-mark{background:white;box-shadow:0 0 25px #608cff33;border-radius:10px;padding:4px}.brand-mark img{width:100%;height:100%;object-fit:contain}.hero{min-height:720px;display:grid;grid-template-columns:1fr;padding:80px 0 75px;position:relative;isolation:isolate;gap:0}.hero:before{display:none}.hero-copy{position:relative;z-index:2;max-width:630px}.hero h1{font-size:clamp(64px,6vw,92px)}.hero-word{color:#eef3ff}.hero-word>span{color:#7fbdff}.hero h1 em{color:#a8bdff}.hero-intro{color:#d1daed;max-width:510px;text-shadow:0 2px 20px #000}.cinema-stage{position:absolute;inset:0 calc((min(1320px,100vw - 48px) - 100vw)/2);overflow:hidden;z-index:0;pointer-events:none;background:#050713}.cinema-art{position:absolute;inset:-3%;background:url('/assets/cloudsystems-products-20260911-141755/izwi-cinematic.png') center center/cover no-repeat;animation:cinema-drift 18s ease-in-out infinite alternate;will-change:transform}.cinema-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#040611f5 0%,#040611da 27%,#04061155 51%,transparent 72%),linear-gradient(0deg,#060814,transparent 23%)}.cinema-light{position:absolute;inset:0;background:radial-gradient(ellipse at 73% 50%,#7664ff24,transparent 40%);animation:cinema-breathe 6s ease-in-out infinite alternate;mix-blend-mode:screen}.cinematic .hero>.workflow{display:none}.button{background:#c8dbff;border-color:#c8dbff;color:#101a35;box-shadow:0 4px 0 #415e97}.button:hover{background:#e0eaff;box-shadow:0 7px 0 #415e97}.button-outline{background:#151e38;color:#e1ebff;border-color:#6c84b0;box-shadow:none}.button-outline:hover{background:#26385c;box-shadow:none}.eyebrow{color:#a4c4ff}.trust-list li{color:#c4d0e8}.trust-list li:before{background:#92baff}.izwi-signature{display:flex;align-items:center;gap:13px;margin-top:30px;color:#adbbd6;font-size:12px;line-height:1.5}.izwi-signature img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:10px;padding:5px}.izwi-signature strong{color:#e7efff;font-weight:500;font-size:14px}.backdrop-motion{position:absolute;right:0;bottom:30px;z-index:3;background:#080f24d9;color:#dce7ff;border:1px solid #577199;border-radius:30px;padding:11px 17px;font-size:13px;cursor:pointer}.backdrop-paused .cinema-art,.backdrop-paused .cinema-light{animation-play-state:paused}.signal-bar{background:#101d3c;color:#d0e0ff;border-block:1px solid #688bc64d}.signal-bar i{background:#7fc9ff}.cinematic .security-panel{background:#c8d7f3}.cinematic .site-footer{background:#0c1325}.cinematic .cta-section h2 em{color:#a8c7ff}
.cube-logo{position:absolute;height:auto;transform:translate(-50%,-50%) scaleY(.68);filter:drop-shadow(0 0 12px #9ccfff);border-radius:10%;pointer-events:none}
@keyframes cinema-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.065) translate3d(-.7%,.5%,0)}}@keyframes cinema-breathe{from{opacity:.2}to{opacity:.9}}
@media(min-width:1600px){.hero{min-height:780px}}
@media(max-width:850px){.hero{padding-top:330px;min-height:0;padding-bottom:65px}.hero-copy{max-width:650px}.cinema-art{background-position:70% top;background-size:auto 590px;background-repeat:no-repeat}.cinema-stage:after{background:linear-gradient(0deg,#060814 0%,#060814 20%,#060814bd 45%,transparent 80%)}.hero h1{font-size:68px}.backdrop-motion{top:25px;bottom:auto}.cinema-stage{inset-inline:-24px}}
@media(max-width:550px){.hero{padding-top:280px}.hero h1{font-size:clamp(54px,12vw,68px)}.cinema-art{background-size:auto 450px}.hero-intro{font-size:17px}.izwi-signature{margin-top:26px}}
@media(prefers-reduced-motion:reduce){.cinema-art,.cinema-light{animation:none!important}}

/* ICE CUBE revision: upright mark, blue-only backdrop and automatic motion. */
.cinema-art{background:none;animation:cube-float 9s ease-in-out infinite;transform-origin:75% 55%}
.cinema-art:before{content:'';position:absolute;inset:0;background:url('/assets/cloudsystems-products-20260911-141755/izwi-cinematic.png') center center/cover no-repeat;filter:hue-rotate(-22deg) saturate(.8)}
.cinema-light{background:radial-gradient(ellipse at 73% 50%,#459ee92b,transparent 40%)}
.cinematic h2 em,.cinematic .hero h1 em{color:#a8d3f4}
.cinematic .explorer-options{background:#0d1823}.cinematic .explorer-options button{color:#d5e4f0}.cinematic .explorer-options button[aria-selected=true]{background:#c4dded;color:#193246;border-color:#c4dded}.cinematic .explorer-options button>span,.cinematic .explorer-options small{color:#9fb8cb}.cinematic .explorer-options button[aria-selected=true]>span,.cinematic .explorer-options button[aria-selected=true] small{color:#42637c}
.cinematic .explorer-preview{background:#101c29;border-color:#3b5d78;box-shadow:10px 12px 0 #5889ae22}.cinematic .preview-toolbar{background:#20374c;color:#c9dfef}.cinematic .preview-content h3{color:#e6f2fa}.cinematic .sample-row{background:#172b3c;border-color:#36516c}.cinematic .sample-row span{color:#bfd7e9}.cinematic .sample-metrics div{background:#21394d}.cinematic .sample-metrics strong{color:#a3dcff}.cinematic .sample-bars i{background:linear-gradient(#99d9f6,#426f9a)}.cinematic .preview-footnote{color:#a4bdce}
.cinematic .feature-grid,.cinematic .feature-card,.cinematic .feature-card+.feature-card,.cinematic .control-list>div{border-color:#3c5369}.cinematic .feature-index{color:#9dcce9}.cinematic .feature-card p,.cinematic .feature-card li,.cinematic .control-list p,.cinematic .section-heading>p:last-child,.cinematic .control-copy>p:not(.eyebrow),.cinematic .cta-section>p:not(.eyebrow){color:#b6c7d5}.cinematic .control-list>div>span{background:#20364a;border-color:#597b99;color:#c7e4f8}
.cinematic .security-panel{background:#c8deeb;color:#193448;box-shadow:10px 10px 0 #405e7830}.cinematic .security-panel h2,.cinematic .security-points strong{color:#193448}.cinematic .security-panel .eyebrow,.cinematic .security-points span{color:#42647d}.cinematic .security-points p{border-color:#94b3c7}.cinematic .site-footer{border-color:#344d65}.cinematic .footer-brand span,.cinematic .copyright{color:#aebfd0}
@keyframes cube-float{0%,100%{transform:scale(1.025) translate3d(0,5px,0)}50%{transform:scale(1.045) translate3d(0,-10px,0)}}
@media(max-width:850px){.cinema-art:before{background-position:70% top;background-size:auto 590px}}
@media(max-width:550px){.cinema-art:before{background-size:auto 450px}}
@media(prefers-reduced-motion:reduce){.cinema-art{animation:none!important;transform:none}}

/* STATIC CUBE: shared coordinates keep the logo, cube and floor aligned. */
.cinema-art{animation:none!important;transform:none!important;will-change:auto}
.cinema-art:before{display:none}
.cube-plane{position:absolute;background:transparent}
.cube-ground,.cube-well,.cube-lift,.cube-cutout{position:absolute;inset:0}
.cube-ground{background:url('/assets/cloudsystems-products-20260911-141755/izwi-floor-clean.png') center/100% 100% no-repeat;transform:none;animation:floor-breathe 16s ease-in-out infinite;isolation:isolate;overflow:hidden}
/* Overlapping light waves flutter across the floor, below the static cube. */
.cube-ground:before,.cube-ground:after{content:'';position:absolute;inset:-20%;pointer-events:none;mix-blend-mode:screen;background:repeating-linear-gradient(115deg,transparent 0%,transparent 12%,#80bfff08 18%,#90d8ff32 24%,#80bfff08 30%,transparent 38%,transparent 50%);background-size:160% 160%;animation:floor-light-wave 19s ease-in-out infinite;will-change:transform,opacity}
.cube-ground:after{background:repeating-linear-gradient(65deg,transparent 0%,transparent 20%,#75c9ff08 27%,#a0dcff24 34%,transparent 43%,transparent 60%);background-size:140% 140%;animation:floor-light-counterwave 23s ease-in-out infinite;animation-delay:-8s}
@keyframes floor-light-wave{0%,100%{transform:translate3d(-9%,2%,0);opacity:.18}25%{opacity:.45}50%{transform:translate3d(9%,-2%,0);opacity:.65}75%{opacity:.32}}
@keyframes floor-light-counterwave{0%,100%{transform:translate3d(8%,-3%,0);opacity:.15}35%{opacity:.5}50%{transform:translate3d(-8%,3%,0);opacity:.35}75%{opacity:.6}}
.cube-cutout{background:url('/assets/cloudsystems-products-20260911-141755/izwi-cinematic.png') center/100% 100% no-repeat;filter:hue-rotate(-22deg) saturate(.8)}
/* Scale the cube and its upright logo together around their floor contact. */
.cube-well{transform:scale(.7);transform-origin:74% 77.5%;clip-path:none;background:none}
.cube-well:before{display:none}
@keyframes floor-breathe{0%,100%{filter:brightness(.88) saturate(.9)}50%{filter:brightness(1.12) saturate(1.04)}}
.cube-cutout{clip-path:polygon(53.3% 31.7%,75.2% 21.2%,96.3% 32.4%,96.3% 62.8%,74% 77.5%,52.7% 62.8%)}
.cube-lift{animation:none;transform:none;will-change:auto;backface-visibility:hidden}
.cinema-light{animation:none;opacity:.2}
.backdrop-paused .cube-lift{animation-play-state:paused}
.backdrop-paused .cube-ground{animation-play-state:paused}
.backdrop-paused .cube-ground:before,.backdrop-paused .cube-ground:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cube-ground:before,.cube-ground:after{animation:none!important;opacity:.15;will-change:auto}}
@media(prefers-reduced-motion:reduce){.cube-ground{animation:none!important}}
@media(prefers-reduced-motion:reduce){.cube-lift{animation:none!important;transform:none!important}}
.products-placeholder{min-height:calc(100vh - 92px);overflow:hidden}
.product-hero{min-height:620px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(60px,9vw,150px);align-items:center;padding:68px 0 92px;position:relative}
.product-hero:after{content:'';position:absolute;width:720px;height:720px;right:-360px;top:-270px;border:1px solid #8dbcf726;border-radius:50%;box-shadow:0 0 0 90px #8dbcf70c,0 0 0 210px #8dbcf708;pointer-events:none}
.product-hero-copy{position:relative;z-index:1;max-width:780px}
.products-title{margin:18px 0 28px;font-size:clamp(62px,7vw,106px);font-weight:500;line-height:.92;letter-spacing:-.065em}
.products-title em{font-family:Georgia,serif;font-weight:400;color:var(--cyan);font-size:.78em}
.product-lead{max-width:700px;color:#bacbdd;font-size:clamp(18px,1.5vw,22px);line-height:1.65}
.product-actions{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:38px}.product-actions .button{display:inline-flex;gap:16px;align-items:center;text-decoration:none}.tutorial-trigger{border:0;background:none;color:#e7efff;cursor:pointer;font:inherit;font-weight:700;padding:12px 0}.tutorial-trigger:hover{color:var(--cyan)}
.product-hero-panel{position:relative;z-index:1;min-height:390px;padding:42px;border:1px solid #6684a65c;background:linear-gradient(145deg,#132235e8,#090d19e8);box-shadow:20px 24px 0 #557ba212;display:flex;flex-direction:column;justify-content:space-between}
.product-panel-label{margin:0;color:#e9f2ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.product-panel-mark{display:flex;align-items:flex-end;gap:10px;height:100px}.product-panel-mark span{display:block;width:22%;background:#9dcdf2}.product-panel-mark span:nth-child(1){height:35%}.product-panel-mark span:nth-child(2){height:68%}.product-panel-mark span:nth-child(3){height:100%}.product-hero-panel>p:not(.product-panel-label){max-width:390px;color:#bed0df;font-size:19px;line-height:1.55}.product-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.product-tags li{padding:8px 11px;border:1px solid #58789a;color:#b9d7ed;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.product-overview{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);gap:clamp(60px,8vw,130px);padding:100px 0;border-top:1px solid var(--line)}
.product-section-intro h2,.product-flow-heading h2,.product-close h2{margin:20px 0 28px;font-size:clamp(40px,4.8vw,70px);font-weight:500;line-height:1.02;letter-spacing:-.055em}.product-section-intro>p:last-child{color:#b6c7d5;font-size:17px;line-height:1.75;max-width:560px}
.capability-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #3c5369;border-left:1px solid #3c5369}.capability-grid article{min-height:245px;padding:30px;border-right:1px solid #3c5369;border-bottom:1px solid #3c5369}.capability-grid span{color:#9dcce9;font-family:monospace;font-size:12px}.capability-grid h3{margin:42px 0 12px;color:#eef4ff;font-size:22px;font-weight:500}.capability-grid p{margin:0;color:#aebfd0;line-height:1.65}
.product-flow{padding:90px clamp(28px,5vw,76px);background:linear-gradient(120deg,#111b2c,#0b101d);border:1px solid #3b536c}.product-flow-heading{display:grid;grid-template-columns:.65fr 1.35fr;gap:60px;align-items:start}.product-flow-heading h2{margin-top:0;max-width:790px}.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);margin:55px 0 0;padding:0;list-style:none;border-top:1px solid #49637c}.flow-steps li{position:relative;padding:30px 28px 8px 0}.flow-steps li:not(:last-child){border-right:1px solid #354a60;margin-right:28px}.flow-steps span{display:block;color:#8dbfe6;font:12px monospace}.flow-steps strong{display:block;margin:30px 0 8px;color:#eff5ff;font-size:21px}.flow-steps small{display:block;max-width:210px;color:#aebfd0;font-size:14px;line-height:1.55}
.embedded-product{margin-top:110px;padding-top:90px;border-top:1px solid var(--line)}
.embedded-product-heading{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:end;margin-bottom:32px}
.embedded-product-heading h2{margin:0;font-size:clamp(36px,4vw,58px);font-weight:500;line-height:1.05;letter-spacing:-.05em}
.embedded-product-heading>p{max-width:560px;margin:0;color:var(--muted);font-size:16px;line-height:1.75}
.tutorial-heading-copy>p{max-width:560px;margin:0 0 22px;color:var(--muted);font-size:16px;line-height:1.75}.tutorial-heading-copy .button{box-shadow:none}
.embedded-demo-frame{overflow:hidden;border:1px solid var(--line-strong);border-radius:16px;background:#fff;box-shadow:0 28px 80px #0006}
.embedded-demo-frame iframe{display:block;width:100%;height:780px;border:0;background:#fff}
.product-close{display:grid;grid-template-columns:1fr 1fr;gap:clamp(55px,9vw,150px);margin-top:110px;padding:100px 0 30px;border-top:1px solid var(--line)}.product-close h2 em{font-family:Georgia,serif;font-weight:400}.product-close-copy>p{margin:0 0 28px;color:#b6c7d5;font-size:18px;line-height:1.75}.product-close-copy ul{margin:0 0 32px;padding:0;list-style:none;border-top:1px solid #3c5369}.product-close-copy li{padding:14px 0;border-bottom:1px solid #3c5369;color:#d7e3ed}.product-close-copy li:before{content:'—';margin-right:14px;color:#9dcce9}.product-close-copy .text-link{color:#dcecff;text-decoration:none;font-weight:700}
@media(max-width:950px){.product-hero,.product-overview,.product-close{grid-template-columns:1fr}.product-hero{gap:50px}.product-hero-panel{min-height:320px}.product-flow-heading{grid-template-columns:1fr}.flow-steps{grid-template-columns:1fr 1fr}.flow-steps li:nth-child(2){border-right:0}.embedded-product-heading{grid-template-columns:1fr}.embedded-demo-frame iframe{height:900px}}
@media(max-width:600px){.product-hero{padding-top:42px}.products-title{font-size:clamp(52px,16vw,72px)}.product-hero-panel{padding:28px}.capability-grid,.flow-steps{grid-template-columns:1fr}.flow-steps li{border-right:0!important;border-bottom:1px solid #354a60;margin-right:0!important}.product-flow{padding:55px 24px}.product-overview,.product-close{padding-block:72px}.embedded-product{margin-top:75px;padding-top:70px}}

/* Products page — clearer product-led reading flow. */
.product-hero{min-height:560px;padding-bottom:70px;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr)}
.product-panel-list{margin:30px 0;padding:0;list-style:none;border-top:1px solid #54718c}.product-panel-list li{display:flex;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid #3a5269;color:#e4eef8;font-size:16px}.product-panel-list span{color:#9dcce9;font:12px monospace}.product-hero-panel{min-height:480px;justify-content:flex-start;gap:18px}.product-hero-panel>p:not(.product-panel-label){font-size:16px;margin:0}.product-hero-panel .product-tags{margin-top:auto}
.product-page-nav{position:sticky;top:91px;z-index:8;display:grid;grid-template-columns:1.25fr repeat(4,auto);align-items:center;gap:26px;margin:0 0 12px;padding:18px 22px;border:1px solid #38536c;background:#090f1df2;box-shadow:0 14px 32px #03050c80;backdrop-filter:blur(14px)}.product-page-nav span{color:#8fa7bb;font:12px monospace;letter-spacing:.08em;text-transform:uppercase}.product-page-nav a{position:relative;color:#c8d5e1;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.product-page-nav a:after{content:'';position:absolute;right:0;bottom:-7px;left:0;height:1px;background:#9dcce9;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}.product-page-nav a:hover{color:#fff}.product-page-nav a:hover:after,.product-page-nav a:focus-visible:after{transform:scaleX(1)}
.product-overview{padding-top:88px}.product-section-intro h2{max-width:620px}.capability-grid article{transition:background .2s ease,transform .2s ease}.capability-grid article:hover{background:#101a2a;transform:translateY(-3px)}
#platform-overview-title,#recruitment-demo-title,#recruitment-tutorial-title,#product-close-title{scroll-margin-top:175px}
@media(max-width:950px){.product-hero{grid-template-columns:1fr}.product-page-nav{top:78px;display:flex;overflow-x:auto;gap:24px}.product-page-nav span{display:none}.product-hero-panel{min-height:360px}.product-overview{padding-top:72px}}
@media(max-width:600px){.product-page-nav{margin-inline:-24px;padding-inline:24px;border-inline:0}.product-hero{min-height:0}.product-hero-panel{min-height:340px}}
.embedded-demo-frame,.embedded-demo-frame iframe{background:#0a1117}

/* Product-only showcase stages: echo the main site's grid and blue-lit depth. */
.embedded-product{position:relative;isolation:isolate;margin-inline:-44px;padding:92px 44px 72px;border:1px solid #334c62;overflow:hidden;background:linear-gradient(145deg,#0d1726f5,#070b15f7 62%,#0b1521f5)}
.embedded-product:before{content:'';position:absolute;z-index:-2;inset:0;pointer-events:none;background:linear-gradient(#76b8ee0a 1px,transparent 1px),linear-gradient(90deg,#76b8ee0a 1px,transparent 1px),radial-gradient(circle at 82% 24%,#69b9f11f,transparent 32%),radial-gradient(circle at 12% 86%,#426eae18,transparent 28%);background-size:46px 46px,46px 46px,auto,auto}
.embedded-product:after{content:'';position:absolute;z-index:-1;width:520px;height:520px;right:-250px;top:-280px;border:1px solid #88c8f326;border-radius:50%;box-shadow:0 0 0 70px #74bdf00a,0 0 0 150px #74bdf007;pointer-events:none}
.embedded-product-heading{position:relative;padding-bottom:28px;border-bottom:1px solid #38546b}.embedded-product-heading:before{content:'';position:absolute;left:0;bottom:-1px;width:96px;height:2px;background:#94cdf3;box-shadow:0 0 18px #7ec8fb80}.embedded-demo-frame{position:relative;border-color:#4a6980;box-shadow:0 34px 90px #0009,0 0 0 8px #6fa8d509}
.tutorial-product{background:linear-gradient(215deg,#0d1a28f5,#070b15f8 58%,#101928f5)}.tutorial-product:after{right:auto;left:-260px;top:auto;bottom:-300px}
@media(max-width:950px){.embedded-product{margin-inline:-24px;padding-inline:24px}}
@media(max-width:600px){.embedded-product{padding-block:66px 48px}}
