:root{--bg:#020713;--panel:#071426;--line:#1e3858;--text:#f7f9ff;--muted:#9aafc9;--cyan:#08cfff;--violet:#8c35ff;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}.shell{width:min(var(--max),calc(100% - 38px));margin:auto}
.top{height:76px;position:sticky;top:0;z-index:50;display:flex;align-items:center;padding:0 max(19px,calc((100vw - var(--max))/2));background:rgba(2,7,19,.92);backdrop-filter:blur(16px);border-bottom:1px solid #14243b}.logo{height:46px;width:auto;max-width:260px;object-fit:contain}.nav{margin-left:auto;display:flex;gap:24px}.nav a{font-size:13px;color:#cbd6e7}.nav a:hover{color:var(--cyan)}.actions{display:flex;gap:10px;margin-left:24px}.btn{border:1px solid #294564;border-radius:9px;background:#071426;color:#fff;padding:12px 17px;cursor:pointer}.primary{border:0;background:linear-gradient(100deg,#00c9f5,#3d73ff,#912fff)}.hamb{display:none;margin-left:auto;background:none;border:0;color:white;font-size:25px}
.hero{min-height:650px;background:linear-gradient(90deg,rgba(2,7,19,.98) 0%,rgba(2,7,19,.88) 28%,rgba(2,7,19,.28) 54%,rgba(2,7,19,.12) 100%),url("../img/hero-cube-wide.webp") 65% center/cover no-repeat;border-bottom:1px solid #152941}.hero-in{min-height:650px;display:flex;align-items:center}.hero-copy{width:53%;padding:70px 0}.eyebrow{font-size:11px;letter-spacing:1.8px;color:#61dfff}.hero h1{font-size:58px;line-height:1.02;letter-spacing:-3px;margin:20px 0}.grad{background:linear-gradient(90deg,#04c8ff,#4774ff,#9c34f6);-webkit-background-clip:text;color:transparent}.hero p{font-size:16px;line-height:1.7;color:#a3b6ce;max-width:610px}.hero-buttons{display:flex;gap:11px;margin:26px 0}.traits{display:flex;gap:25px;color:#b7c7da;font-size:12px}.meaning{margin-top:27px;border-left:2px solid var(--cyan);padding:10px 13px;background:linear-gradient(90deg,rgba(5,24,43,.65),transparent)}.meaning b,.meaning span{display:block}.meaning span{color:#8fa8c4;font-size:11px;margin-top:4px}
.exp{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border:1px solid #203b5b;border-radius:14px;background:#071220;margin-top:-36px;position:relative;z-index:3}.exp>div{padding:21px}.exp>div+div{border-left:1px solid #20344f}.exp b,.exp span{display:block}.exp b{font-size:22px}.exp span{font-size:10px;color:#8ea3be}.section{padding:82px 0}.head{text-align:center;margin-bottom:34px}.head small{color:#55dfff;letter-spacing:1.6px}.head h2{font-size:38px;margin:8px 0}.head p{color:#91a6c0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid #203b5d;border-radius:14px;background:#071426;overflow:hidden}.media{height:190px;overflow:hidden;background:#061020}.media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.body{padding:22px}.body h3{margin:0 0 10px}.body p{color:#9cb0c8;line-height:1.55}.more{border:0;background:none;color:#54dcff;padding:0;cursor:pointer}
.work{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.work .card{cursor:pointer}.work .media{height:165px}.work .body{padding:14px}.work h3{font-size:14px}.work p{font-size:10px;margin-bottom:0}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;align-items:center}.about img{width:100%;border:1px solid #213d60;border-radius:14px}.about p{color:#9bafc7;line-height:1.7}
footer{border-top:1px solid #152942;padding:45px 0 25px}.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.foot img{height:40px}.foot b{font-size:12px}.foot a,.foot p{display:block;font-size:11px;color:#93a7c0;margin:9px 0}.foot a{cursor:pointer}.copy{border-top:1px solid #14243b;margin-top:25px;padding-top:15px;color:#6f839f;font-size:10px}
/* content modal */
.modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.74);backdrop-filter:blur(9px);padding:24px}.modal.show{display:grid;place-items:center}.modalbox{width:min(760px,100%);max-height:88vh;overflow:auto;background:#071426;border:1px solid #2c4d77;border-radius:18px;box-shadow:0 30px 100px #000;position:relative}.modalimg{width:100%;height:280px;object-fit:cover;display:none}.modalcontent{padding:26px}.modalcontent small{color:#5bdfff}.modalcontent h2{font-size:31px;margin:7px 0}.modalcontent h4{color:#9fb2ca;margin:0 0 16px}.modalcontent p{color:#b4c4d7;line-height:1.75;white-space:pre-line}.close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid #37577d;border-radius:50%;background:#061020;color:#fff;font-size:22px;cursor:pointer}
/* MDC AI */
.mdc-ai{position:fixed;right:20px;bottom:18px;z-index:120}.mdc-ai-btn{width:88px;height:88px;border:2px solid #6855ff;border-radius:50%;padding:2px;background:#061020;box-shadow:0 0 28px #513cff88;animation:float 4s ease-in-out infinite;cursor:pointer}.mdc-ai-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}.bubble{position:absolute;right:82px;bottom:64px;width:230px;padding:13px 15px;border:1px solid #594bdf;border-radius:13px;background:#0a1730}.bubble b,.bubble span{display:block}.bubble span{font-size:10px;color:#9eb2ca;margin-top:4px;line-height:1.4}.chat{display:none;position:absolute;right:0;bottom:102px;width:390px;background:#061225;border:1px solid #4156d8;border-radius:17px;overflow:hidden;box-shadow:0 30px 90px #000}.chat.show{display:block}.chathead{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #203958}.chathead img{width:42px;height:42px;border-radius:50%;object-fit:cover}.chathead div{flex:1}.chathead small{display:block;color:#35e487}.chathead button{border:0;background:none;color:#fff;font-size:20px}.msgs{padding:15px;max-height:360px;overflow:auto}.botmsg{background:#0d1d33;border-radius:11px;padding:12px;color:#c8d5e6;font-size:12px;line-height:1.55}.botmsg b{display:block;color:#fff;margin-bottom:4px}.quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.quick button{border:1px solid #2c4e76;background:#08172b;color:#d9e5f5;border-radius:8px;padding:8px;font-size:11px}.chat form{display:grid;grid-template-columns:1fr 42px;gap:7px;padding:10px;border-top:1px solid #203958}.chat input{background:#071426;border:1px solid #294565;color:#fff;border-radius:8px;padding:10px}.send{border:0;border-radius:8px;background:linear-gradient(135deg,#2874ff,#8d31f5);color:#fff}.user-msg{margin:9px 0 9px auto;background:linear-gradient(90deg,#315dff,#8a31f4);padding:9px 11px;border-radius:10px;max-width:82%;font-size:12px}.bot-reply{margin:9px auto 9px 0;background:#0d1d33;padding:9px 11px;border-radius:10px;max-width:86%;font-size:12px;color:#c8d5e6}
@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:900px){.nav{display:none;position:absolute;top:68px;left:12px;right:12px;background:#061225;border:1px solid #203958;padding:15px;flex-direction:column}.nav.show{display:flex}.hamb{display:block}.actions{margin-left:10px}.actions .primary{display:none}.hero{background:linear-gradient(0deg,rgba(2,7,19,.99) 0%,rgba(2,7,19,.72) 55%,rgba(2,7,19,.18)),url("../img/hero-cube-wide.webp") 62% 5%/auto 53% no-repeat;min-height:780px}.hero-in{min-height:780px;align-items:flex-end}.hero-copy{width:100%;padding:330px 0 95px}.cards,.about{grid-template-columns:1fr}.work{grid-template-columns:1fr 1fr}.exp{grid-template-columns:1fr 1fr}.exp>div+div{border-left:0}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shell{width:calc(100% - 26px)}.logo{height:37px;max-width:210px}.hero h1{font-size:42px}.traits{flex-wrap:wrap}.exp{grid-template-columns:1fr}.work{grid-template-columns:1fr}.foot{grid-template-columns:1fr}.bubble{display:none}.chat{position:fixed;left:8px;right:8px;bottom:98px;width:auto}.mdc-ai{right:11px;bottom:11px}.mdc-ai-btn{width:76px;height:76px}.modal{padding:10px}.modalimg{height:210px}}

/* V4.1 LOCKED REBUILD */
.hero-in{position:relative}
.hero-rotate{display:inline-block;transition:opacity .35s ease,transform .35s ease,filter .35s ease}
.hero-rotate.swap{opacity:0;transform:translateY(12px);filter:blur(5px)}
.float-card{position:absolute;z-index:4;min-width:190px;padding:12px 15px;border:1px solid rgba(64,147,255,.58);border-radius:11px;background:rgba(5,18,37,.82);backdrop-filter:blur(12px);box-shadow:0 12px 45px rgba(0,0,0,.3);animation:techFloat 5s ease-in-out infinite}
.float-card:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#28e5ff;box-shadow:0 0 13px #28e5ff}
.float-card b,.float-card span{display:block}.float-card b{font-size:11px;color:#fff}.float-card span{font-size:9px;color:#a8c1dd;margin-top:4px}
.fc-ai{right:29%;top:12%}.fc-ai:before{right:-4px;top:50%}.fc-soft{right:36%;bottom:23%;animation-delay:-1.2s}.fc-soft:before{right:-4px;top:50%}.fc-cloud{right:2%;top:17%;animation-delay:-2.4s}.fc-cloud:before{left:-4px;top:50%}.fc-sec{right:0;bottom:26%;animation-delay:-3.3s}.fc-sec:before{left:-4px;top:50%}
@keyframes techFloat{50%{transform:translateY(-9px)}}
.exp{background:rgba(5,18,35,.97);border-color:#31587f;box-shadow:0 14px 45px rgba(0,0,0,.35)}
.exp b{color:#fff;font-size:25px;font-weight:850;letter-spacing:-.3px}.exp span{color:#e7f2ff;font-size:12px;font-weight:650;margin-top:5px}
.card .media img{object-fit:cover;object-position:center}
.why-video{grid-template-columns:.72fr 1.28fr}
.video-frame{height:390px;position:relative;overflow:hidden;border:1px solid #294b72;border-radius:15px;background:#061020}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block}
.video-note{position:absolute;left:14px;bottom:12px;padding:7px 10px;border:1px solid rgba(64,147,255,.45);border-radius:8px;background:rgba(4,14,29,.75);font-size:9px;letter-spacing:1.2px;color:#9cdfff}
@media(max-width:1100px){.float-card{transform:scale(.9)}.fc-ai{right:12%;top:9%}.fc-soft{right:18%;bottom:18%}.fc-cloud,.fc-sec{display:none}}
@media(max-width:900px){.float-card{display:none}.why-video{grid-template-columns:1fr}.video-frame{height:280px}.exp b{font-size:22px}.exp span{font-size:11px}}


/* ============================================================
   MDC IT SOLUTIONS EXPERIENCE STRIP — BALANCED DESKTOP SIZE
   Keep this block at the END of app.css.
   ============================================================ */
.exp{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    border-radius:16px !important;
    overflow:hidden;
}

.exp > div{
    min-width:0;
    min-height:118px;
    padding:22px 18px !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.exp .stat-value{
    display:block !important;
    white-space:normal !important;
    overflow-wrap:normal;
    word-break:normal;
    font-size:clamp(22px,1.75vw,30px) !important;
    font-weight:900 !important;
    line-height:1.08 !important;
    letter-spacing:-.6px !important;
    color:#fff !important;
    margin:0 !important;
}

/* Long title: slightly smaller so it never overlaps on desktop */
.exp > div:nth-child(3) .stat-value{
    font-size:clamp(21px,1.55vw,27px) !important;
}

.exp .stat-value .stat-suffix{
    display:inline !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    color:inherit !important;
    margin:0 !important;
}

.exp > div > .stat-label{
    display:block !important;
    margin-top:9px !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    color:#cfe4ff !important;
}

@media(max-width:900px){
    .exp{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    .exp>div:nth-child(odd){border-left:0 !important}
    .exp>div{min-height:110px;padding:20px 18px !important}
    .exp .stat-value,
    .exp > div:nth-child(3) .stat-value{font-size:28px !important}
    .exp > div > .stat-label{font-size:12px !important}
}

@media(max-width:560px){
    .exp{grid-template-columns:1fr !important}
    .exp>div{min-height:auto;padding:20px 18px !important}
    .exp>div+div{border-left:0 !important;border-top:1px solid #20344f}
    .exp .stat-value,
    .exp > div:nth-child(3) .stat-value{font-size:27px !important}
    .exp > div > .stat-label{font-size:12px !important}
}

/* RECOVERY: language dropdown + video fallback */
.lang-wrap{position:relative}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:6px;background:#071426;border:1px solid #294564;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:160}
.lang-menu.show{display:block}
.lang-menu button{width:100%;padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#fff;text-align:left;cursor:pointer}
.lang-menu button:hover{background:#10213a}
.video-frame{position:relative}
.video-replay{display:none;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:1px solid #4d74a5;border-radius:50%;background:rgba(4,14,29,.8);color:#fff;cursor:pointer;z-index:3}